一、效果如图
二、实现步骤
2.1、开启多选
<el-table-column type="selection" align="center" width="55">
2.2、隐藏多选框
.el-table__header .el-checkbox{ // 找到表头那一行，然后把里面的复选框隐藏掉 display:none!important; }
2.3、select事件调用：
table通过el-table二次封装，本质还是el-table
2.4、 实现单选
handleSelectionChange(selection,row) { // 清空所有选中 this.$refs.singleTable.$refs.table.clearSelection() if (row) { // 确保更新 this.$nextTick(() => { // 选中当前 this.$refs.singleTable.$refs.table.toggleRowSelection(row, true) }) } // 返回数据给父组件 this.$emit('selection', row) },
最终实现如文章开始图片效果
2.5、禁止选中某行数据
{ type: 'selection', selectable: row => { if(row.status === 1){ return false // 禁止选中 } else { return true // 可以选中 } } },
三、欢迎交流指正。
虽然很简单，但值得记录，不以事小而不为。
四、参考文档
