在elment的table多选中增加单选逻辑，这个也不能说产品的问题，单选和多选应该算是比较基础的应用，但是，element并没有对单选做支持。
于是我有了一个偷懒思路！
前提
由于table的一键全选按钮无法进行细致化操作，无法控制点击时选中的数量，只能在选中后的回调里面处理，所以，我的做法是单选时隐藏这个按钮。
selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消，其实就是禁用的意思。
<el-table-column type="selection" :selectable="onSelectable"></el-table-column>
//是否允许单个勾选
onSelectable(row, index) {
return false;
}
有了这两个前提，我们的逻辑就可以成立了。
逻辑
单选时
隐藏一键全选按钮，控制selectable的输入，如果已经选中过内容了，并且不是当前选中的row，那么就返回false，让其他row禁用选中，如果没有选中内容，那么都返回true。
多选时
显示一键全选按钮，selectable永远返回true。
代码
<template>
<el-table class="thead-light" :class="{'hide-selection':!options.multiple}" :data="tbody" style="width: 100%" stripe @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :selectable="onSelectable">
</el-table-column>
...省略
</el-table>
</template>
<script>
export default {
data() {
return {
tbody: [],
activeRows: [], //选中的内容
//配置
options: {
multiple: false, //是否多选
},
}
},
methods: {
//table多选事件
handleSelectionChange(arr) {
if (arr.length) {
this.activeRows = arr;
} else {
this.activeRows = [];
}
},
//是否允许单个勾选
onSelectable(row, index) {
if (this.options.multiple) return true;
let flag = false;
if (this.activeRows.length === 0) {
flag = true;
} else {
const isActive = this.activeRows.find((item) => item.id === row.id);
if (isActive && isActive.id === row.id) {
flag = true;
} else {
flag = false;
}
}
return flag;
},
}
}
</script>
<style lang="scss" scoped>
//隐藏一键全选
.hide-selection {
::v-deep thead .el-table-column--selection .cell {
display: none;
}
}
</style>
效果图
另一种思路
由于上一种是单选时，选中了一个，必须取消勾选才能选其他的，可能会有些麻烦，所以，你可以不禁用，给selection绑定一个事件，当他点击时，判断一下是否已经存在选中项，然后手动取消选中，具体可以看看table的row-click这些事件。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
