关于 element table多选里面实现单选的偷懒做法

在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这些事件。