element-ui的多选表格checkbox如何实现单选
2019-12-13 本文已影响0人
辉夜真是太可爱啦
效果如图所示
image.png
1.首先修改表格的样式,将selection
的方框去除,并且,将checkbox
的方框改为圆形,本人使用的是stylus
,如果你使用的是less
,请将>>>
改为\deep\
>>>tr th.is-leaf .el-checkbox{
display none
}
>>>.el-checkbox__inner{
border-radius 50%
}
2.在表格中绑定@selection-change
事件,点击之后,判断返回参数的数组长度,大于1的话就先全部清除,再讲选中值进行选中,请注意表格要绑定ref="multipleTable"
,最后this.chooseItem
就是当前选中的值
chooseItem(val) {
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
let array=val.pop();
this.$refs.multipleTable.toggleRowSelection(array);
this.chooseItem=array;
} else {
this.chooseItem=val;
}
},