需求场景: 选择表格数据时,需要控制单条数据的操作按钮是否禁用。
效果图:

html代码:
{{ scope.row.date }} 取消选择
js代码:
export default { data() { return { tableData: [ { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-08", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-06", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-07", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, ], multipleSelection: [], // 多选存储数据 checkedSelection: {}, // 单选存储数据 }; }, mounted() { document.onclick = () => { console.log('单选--checkedSelection', this.checkedSelection); } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach((row) => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, // 设置单选主要代码 handleSelectionChange(val) { console.log('val--==', val); // 默认多选 // this.multipleSelection = val; // 单选 if(val.length == 1){ let item = val[val.length -1]; this.checkedSelection = JSON.parse(JSON.stringify(item)); } // 单选选中多条时,需要清空所选数据 if(val.length > 1){ this.$refs.multipleTable.clearSelection(); // 清空选项 this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据 } // 取消选中 if(val.length == 0){ this.checkedSelection = {}; } }, }, };
css代码: