小编在做需求时，遇到了在el-table表格中加入多条数据，并且每条数据要通过el-select来选取相应的值，做到动态选择。
- 最开始，小编的实现效果是左边红色框的效果，选择其中一个时，其他的也对应赋值。
- 主要是因为el-option的选项都是相同的，v-model 的值也是相同的。
- 那让每一条 v-model 的值不同不就好了么！！
html中代码：
<el-table-column label="文档类别" prop="categoryName">
<template slot-scope="scope">
<el-select
:ref="'categoryName' + scope.$index"
v-model="tableData[scope.$index]['categoryName']"
placeholder="请选择文档类别"
clearable
>
<el-option :value="tableData[scope.$index]['categoryName']" style="height: auto">
<el-tree
:ref="'categoryNameTree' + scope.$index"
:data="typeList"
node-key="id"
:props="typeTreeProps"
@node-click="getTypeList(scope.$index)"
>
<span slot-scope="{ node }">{{ node.label }}</span>
</el-tree>
</el-option>
</el-select>
</template>
</el-table-column>代码解说：
在 < el-table > 中绑定数据 :data="tableData" tableData 为数组
el-select中
- scope.$index ----- 为tableData中每条数据的下标
- :ref="'categoryName' + scope.$index" ----- 设置 ref ，用户选择完值后 el-option 自动隐藏
- v-model="tableData[scope.$index]['categoryName']" ----- 绑定动态的 v-model ，很重要。要注意的是 tableData[scope.$index] 是通过下标找当数组tableData中当前选择的数据。而这个 categoryName 参数必须是数组 tableData 中存在的。
el-option中
- :value="tableData[scope.$index]['categoryName']" ----- 与 v-model 相同，绑定动态值
el-tree中
:ref="'categoryNameTree' + scope.$index" ----- 与 el-select 中 ref 相同
@node-click="getTypeList(scope.$index)" ----- 选择数据时触发，传当前元素的下标
data中：
data() {
return {
tableData: [] // 接口返回的数据，:data绑定在el-table中
typeList: [], // 接口返回的数据，展现在el-option中，用el-tree包裹
typeTreeProps: {
children: 'children',
label: 'name'
},
categoryName: ''
}
}methods中：
getTypeList(index) {
// .getCurrentKey()获取到当前要选择节点的key值
// 使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
const nodeId = this.$refs['categoryNameTree' + index].getCurrentKey()
// .getNode(nodeId) 根据 data 或者 key 拿到 Tree 组件中的 node
const node = this.$refs['categoryNameTree' + index].getNode(nodeId)
// 根据index给当前元素的categoryName参数赋值
this.$set(this.tableData[index], 'categoryName', node.label)
this.$set(this.tableData[index], 'categoryNo', node.data.docTypeNo)
// 此时页面上已经可以动态选择
// 这一步是通过判断当前元素的v-model是否有值来控制el-option是否隐藏
if (this.tableData[index].categoryName) {
// .blur()用来隐藏当前展开的下拉选择框
this.$refs['categoryName' + index].blur()
}
},this.$refs['categoryName' + index] 设置动态是因为，在有多条数据时，如果不是动态的，但凡有没有值的选择框，就不会触发。而这样就可以通过index来判断隐藏那条元素。
遇到新的问题就会有新的知识增加，其实入职后有很多很多值得学习，并且记住的知识，但都因年底的原因，项目要保证封版后bug都解决掉而忙忘掉，翻回来去想记录的时候又不从下手。
