表格列表中，单选、多选以及点击该行数据友好体验的封装

如图：

点击该行，然后前面的复选框自动勾选，再次点击，复选框取消，点击复选框也可以操作，单选多选都可以。

先了解一下用到的方法：点击该行的方法@row-click，点击复选框的方法，@select

@row-click的参数，row，column，$e，第一个参数是该行数据对象

@select的参数有两个 selection，row 第一个是目前选中的数组，第二个是当前选中的数据对象

不知道的可以打印一下。

<el-table
   ref="singleTable"
   v-loading="loading"
   :data="tableData"
   :row-key="getRowKeys"
   class="single-select-table"
   @select="handleSelectionChange"
   @row-click="handleCurrentChange"
 >
....
</el-table>
// 数据
onlySingleSelection:false, // 默认多选
secUserInfo: [], //选中的数组，存值后续需要
// 方法
// 选中当前行数据 默认多选
    handleCurrentChange(e) {
      switch (this.onlySingleSelection) {
        // 单选
        case true:
          // 单选存值
          if (!this.secUserInfo.length) {
            this.secUserInfo = [e]
          } else {
            const ix = this.secUserInfo.findIndex(i => i === e)
            if (ix > -1) {
              this.secUserInfo = []
            } else {
              this.secUserInfo = [e]
              this.$refs.singleTable.clearSelection()
            }
          }
          break
        // 多选
        case false:
          // 多选存值
          if (!this.secUserInfo.length) {
            this.secUserInfo.push(e)
          } else {
            const ix = this.secUserInfo.findIndex(i => i === e)
            if (ix > -1) {
              this.secUserInfo.splice(ix, 1)
            } else {
              this.secUserInfo.push(e)
            }
          }
          break
      }
      this.$refs.singleTable.toggleRowSelection(e)
    },
    // 选中该行前面的复选框 默认多选
    handleSelectionChange(val, row) {
      switch (this.onlySingleSelection) {
        // 单选
        case true:
          this.$refs.singleTable.clearSelection()
          if (!val.length) {
            this.secUserInfo = []
            return
          }
          this.$refs.singleTable.toggleRowSelection(row)
          // 单选存值
          this.secUserInfo = [row]
          break
        case false:
          // 多选存值
          this.secUserInfo = val
          break
      }
    },

简单说一下：

多选模式：（1）选中当前行触发@row-click，判断当前存值secUserInfo是否为空，如果是空，直接push当前行的数据对象，如果不是空，findIndex检索一下secUserInfo数组中是否含有当前数据对象，如果有则splice切片掉，如果没有则push进去，最后再用内置api方法toggleRowSelection即可（2）同时前面的复选框点击时触发@select，获取当前勾选中的数组，直接存值secUserInfo即可

单选模式： （1）选中当前行触发@row-click，判断当前存值secUserInfo是否为空，如果是空，直接push当前行的数据对象，如果不是空，findIndex检索一下secUserInfo数组中是否含有当前数据对象，如果有则置空，如果没有则直接赋值，并且清空复选框用内置api方法clearSelection即可，最后再用内置api方法toggleRowSelection将选择的当前行数据对象给赋值/清空（2）同时前面的复选框点击时触发@select，第一个参数获取当前勾选中的数组，第二个参数获取当前勾选的数据对象，先清空复选框状态，用内置api方法clearSelection，随后判断第一个参数是否为空，如果是空secUserInfo数组置空然后return 出去即可，如果不是空，则将第二个参数存入数组并设置选中状态即可

整体来说思路还是比较清晰，比较简单的封装，后续还有树状结构的单选多选子叶节点父子半选等封装操作，今天就先说这么多，有什么更好的方法或者优化可以提出来，大家一起进步。