木灵鱼儿

木灵鱼儿

阅读:92

最后更新:2021/09/08/ 11:30:53

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 92

相关文章