element-ui中select选择器怎么获取更换的数据
选择器的使用一般分为在表格中和表格外两种方式，本文主要内容为element-ui组件下el-select控件的使用。
- 两种情况下选择器的效果展示
- el-select选择器基本写法
- 更换数据的参数传递【重点】
一、两种情况效果展示
1、在表格中：
2、在表格外：
二、代码基本写法
1、表格中
一般表格内的数据直接写在el-table-column中即可，可以借助scope来直接获取v-model的默认值，el-option中将属性设置为自己需求的格式。
其中v-for中的数据存放select数组，如上面的costData
key是唯一确定的option，必须要使用唯一确定的属性来指代
label是在页面直接展示中的下拉框选项
value在页面不体现，但是有很重要的作用可以用来拼接特殊字符，进行传递，第三节有仔细解释。
2、在表格外
核心代码相同，不过多解释，这里一般使用el-row引出，作为完整的一行进行展示，这里还可以借用el-col根据需求变化排版。
三、更换数据的参数传递
这节将作为本文章最重要的一部分展开叙述，之前的两节都是为了铺垫此写法。
1、表格中参数传递
（1）普遍情况下
借用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代码
这里需要使用连接符将需要的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调用的方法无参数，所以可以不使用括号
（一）直接传递
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