直接看图的效果。
选中第二行,第二行对应的操作按钮禁用,其他行不受影响;
代码:
<template>
<div>
<el-table
ref="nRiskRateData"
:data="nRiskRateData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
@select="select"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="a" width="200" prop="riskSorted" align="center">
</el-table-column>
<el-table-column label="c" width="200" prop="riskCode" align="center">
</el-table-column>
<el-table-column label="b" width="200" prop="riskName" align="center">
</el-table-column>
<el-table-column label="d" width="200" prop="rateTop" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.rateTop"
:disabled="scope.row.isDisabled"
>
<template slot="append">%</template>
</el-input>
<el-button :disabled="scope.row.isDisabled">按钮</el-button>
<!-- 真是项目中我使用svg生成的button,没有disabled属性,我是用pointer-events属性,让点击事件失效,参考这个div的写法 -->
<div
:style="{
'pointer-events': scope.row.isDisabled
? 'none'
: 'visiblePainted',
}"
@click="click"
>
我有点击事件,点我
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
nRiskRateData: [
{
riskSorted: "aaa",
riskCode: "AAAA",
riskName: "hello",
rateTop: 10,
},
{
riskSorted: "bbb",
riskCode: "BBBB",
riskName: "hi",
rateTop: 100,
},
],
isNot: false,
};
},
methods: {
// 最开始我考虑使用val的长度来判断,这样会导致,选中一个,所有的操作按钮都禁用了;
handleSelectionChange(val) {
//
// if(val.length > 0){
// this.isNot = true
// }else{
// this.isNot = false
// }
},
// 使用select这样写,选中哪行哪行的按钮禁用
select(selection, row) {
console.log("selection", selection);
console.log("row", row);
let selected = selection.length && selection.indexOf(row) !== -1;
console.log("判断", selection.length);
if (selected === true) {
row.isDisabled = true; //这个isDisabled 是每行数据里都存在的一个属性
} else {
row.isDisabled = false;
}
},
click() {
console.log("打印");
},
},
};
</script>