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;
            }
},
上一篇下一篇

猜你喜欢

热点阅读