当我们table的可编辑行中,如果有几列下拉,并且后面一列的下拉数据依赖前面一列,那么后面一列的option数据就事不同的,这个时候我们就需要存一个行的optionLit
<el-table-column align="center" property="deptId" label="To">
<template slot-scope="scope">
<el-select v-model="scope.row.deptId" placeholder="To" @change="deptIdHandle($event,scope.row, scope.$index)">
<el-option
v-for="(item, index) in deptList"
:label="item.deptName"
:value="item.deptId"
:key="index"
>
</el-option>
</el-select>
</template>
</el-table-column>
在前一列的下拉方法中讲row的相关数据传过去
async deptIdHandle(val, rowData, rowIndex){
const { data } = await skillList(val);
rowData.skillList = data.data
this.$set(this.addTableData, rowIndex, Object.assign({}, rowData));
},
在方法中接收,拿数据去请求也还好,在原本的list里筛选也好,再在rowdata中定义一个list去装数据
然后再用$set的方法set到这个table中
<el-table-column align="center" property="skillName" label="技能">
<template slot-scope="scope">
<el-select v-model="scope.row.skillName" placeholder="技能">
<el-option
v-for="skillInfo in scope.row.skillList"
:key="skillInfo.skillId"
:label="skillInfo.skillName"
:value="skillInfo.skillId"
>
</el-option>
</el-select>
</template>
</el-table-column>
然后直接就可以在下一列的option中使用拉~