下面的代码只是我自己结合自己的工作需求做的一个笔记,如果不能实现,可以多百度几个试试,我也是百度之后结合自己的工作需求改的
别的博主写了很多的事件,在一番尝试之后,我发现只需要这两个就可以是实现了,不过会多次执行,因为我在这两个事件都不做后端接口的请求再加上数据也不多,我就想上锁让@select执行一次就好,好像我上的锁是不起作用的,但是对于我目前的需求,也没关系
@selection-change="handleSelectionChange"
@select="select"
<el-table
:data="tableData"
rowKey="id"
:expand-row-keys="expands"
ref="multipleTable"
:tree-props="{ children: 'childes', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
@row-click="onselectOp"
@select="select"
:height="type ? '500' : '680'">
<el-table-column width="55" type="selection" :selectable="selected" :reserve-selection="true" v-if="!type"></el-table-column>
</el-table>
data () {
return {
isFock: false,
}
methods:{
//关键在于select 事件
select (selection, row) {
if (!this.isFock) return;
// 清除 所有勾选项
this.$refs.multipleTable.clearSelection();
// 当表格数据都没有被勾选的时候 就返回
// 主要用于将当前勾选的表格状态清除
if (selection.length == 0) return;
this.$refs.multipleTable.toggleRowSelection(row, true);
this.isFock = false;
},
handleSelectionChange (val) {
//isFock 是给 this.$refs.multipleTable.toggleRowSelection()事件上的锁,
//好像这个锁是不起作用的 时间就了不记得了 下次写的时候再看看
//反正这样是可以实现单选的效果的
this.isFock = false;//记得下面操作完之后上锁
// console.log(val);
// console.log(nuemultipleSelection);
// 删除input编辑
//if (nuemultipleSelection.length > 0) {
// nuemultipleSelection[0].childes.map((item, index) => {
// if (item.icon) {
// nuemultipleSelection[0].childes.splice(index, 1);
//}
// });
// }
// if (val.length > 1) {
// console.log([val[val.length - 1]]);
// }
// nuemultipleSelection = val.length > 1 ? [val[val.length - 1]] : val;
// this.multipleSelection = JSON.parse(
// JSON.stringify(val.length > 1 ? [val[val.length - 1]] : val)
// );
// console.log(nuemultipleSelection);
// console.log(this.multipleSelection);
this.isFock = true;
},
}