代码
<el-table-column prop="is_active" label="线路状态">
<template slot-scope="scope">
<el-select
v-model="scope.row.is_active"
placeholder="请选择"
:disabled="!scope.row.is_active && is_activeList.length >= 3"
@change="(value) => is_activeChange(value, scope.row)"
>
<el-option label="激活" :value="1"></el-option>
<el-option label="未激活" :value="0"></el-option>
</el-select>
</template>
</el-table-column>
methods: {
// 切换状态触发
is_activeChange(val, row) {
this.setDs();
},
// 处理禁用
setDs() {
this.is_activeList = [];
// 这个请求到接口 拿到表格数据时写
if (this.tableData && this.tableData.length) {
this.tableData.forEach((v) => {
if (v.is_active) {
this.is_activeList.push(v);
}
});
}
},
}
:disabled=“!scope.row.is_active && is_activeList.length >= 3” 这句话是判断
!scope.row.is_active是选中三条后,激活还可以选择,如果没有这个判断,三条激活达到后,将全部禁用