element-ui之el-table利用多选实现单选效果

 （demo中版本element-ui版本为: "^2.15.12"）

在element-ui中是为我们准备好了可直接使用的单选与多选属性的。但是单选与多选的形式不一样，在某些情况下我们可能想让它们的选择方式尽量统一，于是我想能不能把利用多选属性实现多选，并用一个变量来控制表格是多选还是单选。

要实现单选有两步：一、隐藏多选选择框。二、每次选择只能选择一个。

一、隐藏多选选择框

第一个最好实现，打开f12找到相应元素，隐藏即可。css代码如下：

给<el-table>添加上no-multiple这个class即可隐藏多选。

.no-multiple {
  // 隐藏多选
  ::v-deep .el-table__header-wrapper .el-checkbox {
    display: none;
  }
}

二、实现每次选择只能选择一个

        template部分：

(给el-table添加selection-change和select方法)

<el-table
v-loading="isLoading"
ref="multipleTable"
height="340px"
:data="tableData"
:class="{ 'no-multiple': !isMultiple }"
@selection-change="handleSelectionChange"
@select="selectTable"
>
</el-table>

js部分：

handleSelectionChange(val) {
      // 通过配置判断是否可多选
      if (this.isMultiple) {
        this.multipleSelection = val
      } else {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      }
    },
    selectTable(selection, row) {
      // 单选时
      if (!this.isMultiple) {
        this.multipleSelection = [row]
      }
    }

我们在data中定义了一个变量isMultiple来决定是否单选，也可以放在props中外部传入控制。以上就是涉及到多选模式下使用单选的主要代码了。