element UI Table 多选变单选_elementui table 单选

描述：
ElementUI有单选触发方式，但所做系统表格中 ，有一列是点击详情，所以需要利用ElementUI多选方式。实现效果如下：
将多选改为单选:
解决方法一：
1. HTML

 <el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中，请稍候......" border @selection-change="selectRow" @select="selectCur">
 </el-table>

2. JS

 // 选择变化时
    selectRow(val) {
      if (val.length > 1) {
        this.$refs.selectTable.clearSelection()
        this.$refs.selectTable.toggleRowSelection(val.pop())
      }
    },

3. CSS(将全选项隐藏)

// 将全选项隐藏
.more_btn thead .el-table-column--selection .cell {
  display: none;
}

解决方法二：
JS

 selectCur(val, row) {
      console.log(val, 'val')
      console.log(row, 'row')
      this.$refs.selectTable.clearSelection()
      this.$refs.selectTable.toggleRowSelection(row, true)
    },

注：但是这种方法只能切换勾选，不可以取消勾选

解决方法三：
1. HTML
删除了 @selection-change=“selectRow” 方法

 <el-table ref="selectTable" :data="tableData" class="more_btn" v-loading="loading" element-loading-text="拼命加载中，请稍候......" border  @select="selectCur">
 </el-table>

2.JS
  

 // 选择时
    selectCur(selection, row) {
      const selectTable = this.$refs.selectTable
      if (selection.includes(row)) {
        selectTable.clearSelection()
 
        this.$nextTick(() => {
          selectTable.toggleRowSelection(row, true)
          this.selectCurRow = row
        })
      } else {
        this.selectCurRow = undefined
      }
    }

3. CSS(将全选项隐藏) 

// 将全选项隐藏
 thead .el-table-column--selection .cell {
  display: none;
}