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 } }