element-ui中select选择器怎么获取更换的数据

选择器的使用一般分为在表格中和表格外两种方式，本文主要内容为element-ui组件下el-select控件的使用。

1. 两种情况下选择器的效果展示
2. el-select选择器基本写法
3. 更换数据的参数传递【重点】

一、两种情况效果展示

1、在表格中：

2、在表格外：

二、代码基本写法

1、表格中

<el-table-column prop="costSubjectDes" label="科目" align="center" width="240">
   <template slot-scope="scope">
       <el-select size="mini" placeholder="请选择..." class="width-full"
            v-model="scope.row.subjectTypeId">
              <el-option
                v-for="item in costData"
                :key="item.id"
                :label="item.sequence"
                :value="item.id">
              </el-option>
  </el-select>
</el-table-column>

一般表格内的数据直接写在el-table-column中即可，可以借助scope来直接获取v-model的默认值，el-option中将属性设置为自己需求的格式。

其中v-for中的数据存放select数组，如上面的costData

key是唯一确定的option，必须要使用唯一确定的属性来指代

label是在页面直接展示中的下拉框选项

value在页面不体现，但是有很重要的作用可以用来拼接特殊字符，进行传递，第三节有仔细解释。

2、在表格外

  <el-row>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.description"
          :value="item.value">
        </el-option>
      </el-select>
    </el-row>

核心代码相同，不过多解释，这里一般使用el-row引出，作为完整的一行进行展示，这里还可以借用el-col根据需求变化排版。

三、更换数据的参数传递

这节将作为本文章最重要的一部分展开叙述，之前的两节都是为了铺垫此写法。

1、表格中参数传递

（1）普遍情况下

 <el-table-column prop="costSubjectDes" label="科目" align="center" width="240">
          <template slot-scope="scope">
            <el-select size="mini" placeholder="请选择..." class="width-full"    
v-model="scope.row.subjectTypeId" clearable filterable @change="change(scope.row)">
              <el-option
                v-for="item in costData"
                :key="item.id"
                :label="item.sequence"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

借用scope引用row来传递数据，使用@change钩子方法直接开启事件，在JS中进行进一步构建，可以再方法参数中拿到需要的行数据，很方便。但是此方法不能拿到costData中的其他数据【具体看级联修改的操作】

例如【加上了防抖处理，这里不是必要】：

   change({id, subjectTypeId, remark}) {
        // 防抖处理，1秒内禁止重复提交
        if (id === this.editorId) {
          clearTimeout(this.timer);
        }
        this.editorId = id;
        this.timer = setTimeout(() => {
          setOtherExpenses([{id, subjectTypeId, remark}]).then(res => {
            if (res.result) {
              this.$message.success('修改成功');
            }
          });
        }, 1000);
      }

（2）需要级联修改的特殊情况下

el-select代码

 <el-table-column prop="quantitySubjectDes"
                label="概算工程量科目"
                class-name="editor-column"
                header-align="center"
                width="200">
      <template slot-scope="scope">
         <el-select size="mini" placeholder="请选择..." v-model="scope.row.quantitySubjectDes" @change="changeQuentitySubject(scope.row)">
           <el-option v-for="item in quantityData"
                      :key="item.levelCode"
                      :label="item.name"
                      :value="item.name + ';'+item.levelCode +';'+item.unit">
            </el-option>
          </el-select>
       </template>
 </el-table-column>

这里需要使用连接符将需要的quantityData数据在value中连接起来，在JS中代码中进行拆分，拿到之后就可以级联操作

 changeQuentitySubject(data) {
        data.quantitySubject = data.quantitySubjectDes.split(';')[1];
        data.quantityUnit = data.quantitySubjectDes.split(';')[2];
        data.quantitySubjectDes = data.quantitySubjectDes.split(';')[0];
        this.change(data);
      }

这里面具体的数据不重要，重要的是思想和做法，在其他需求中同样适用。

2、表格外

这里的change调用的方法无参数，所以可以不使用括号

 <el-row>
      <el-select v-model="value" placeholder="请选择" @change="changeSubjectType">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.description"
          :value="item.value+':'+item.codeId">
        </el-option>
      </el-select>
    </el-row>

（一）直接传递

changeSubjectType(vId) {
        this.codeId = vId.split(':')[1];
        this.getProjectTree();
      }

注意，这里的value也有变化。这里的vId就是上面option中的value

在JS代码中的方法参数中使用一个数据指代，如果直接操作，就可以发现

或者还有一种方式，这是一种更详细的做法：

（二）遍历对比

select(value) {
	let obj = {}
	obj = this.options.find((item) => {
		return item.value=== value
	})
	this.item= obj.item
}

find方法会在option数组中遍历寻找符合要求的value，之后再将符合要求的对象，赋值给obj，之后再获取obj中的属性

---

个人建议：如果需要的数据比较少，使用方法一会更方便一点，同时还节省空间，

如果拿到的obj有大用处，或者需要的属性比较多，可以尝试方法二，更细致。

---

The   End

Good  Lunk