一、效果如图
二、实现步骤
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、 最终实现如文章开始图片效果
三、欢迎交流指正。
虽然很简单,但值得记录,不以事小而不为。
四、参考文档