el-table 多选添加限制只能选一个

遇到了新需求,el-table中的多选行限制显示成单选行,并且单击当前行的其他地方也要默认勾选当前行数据,使用radio又嫌弃太丑了,需要方框,那就只能在之前的多选框上面改造了

思路:勾选超过1条勾选第二条的时候做处理,将新勾选的设置选中,之前勾选的一条取消选中

 el-table页面添加

highlight-current-row 行选中高亮显示,
@current-change行选中事件
@selection-change勾选框选中事件
<el-table @current-change="handleSelectionChange" highlight-current-row @selection-change="handleSelectionChange" ref="multipleTable" border :data="workorderList" >
handleSelectionChange(selection) {

      if (Array.isArray(selection) && selection.length > 1) {//点击勾选框
        this.$refs.multipleTable.toggleRowSelection(selection[0],false);
        this.$refs.multipleTable.toggleRowSelection(selection[1],true);

      }else if(!Array.isArray(selection)){//点击行
        this.$refs.multipleTable.toggleRowSelection(selection,false);
        this.$refs.multipleTable.toggleRowSelection(selection,true);
}
else{ let rowData = Array.isArray(selection)?selection[0]:selection; //拿到选中的当前行数据,后续操作 // todo } }
posted @ 2023-07-14 15:31  爱听书的程序猿  阅读(1847)  评论(0编辑  收藏  举报