vue 实现表格点击单选、多选

单选

添加 ref属性名 在表格上加@selection-change事件 在表格上加@row-click单击事件可以实现点击行单选

/** 单击选中行数据 */
    clickRow(row) {
      this.$refs.tb.toggleRowSelection(row)
    },

    userHandleSelectionChange(selection) {
      // 单选
      if (this.isSingle) {
        this.checkUser = selection[0]
        if (selection.length > 1) {
          this.$refs.tb.clearSelection()
          this.$refs.tb.toggleRowSelection(selection.pop())
        }
      } else {
        this.checkUser = selection
      }
    },

这个方法可以保证每次都是选择最后点击的那行

多选

在表格上添加@selection-change方法

 // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.teamId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

selection即为选中的多个数据的数组

、、、、、、、、、、、、、、、、、、、、、

el-table插件可以选择行，但是只能多选，而项目中有单选的需求。
效果如下图所示，点击行或者点击复选框都可以选中行（高亮，复选框选中），并且每次只选中当前行，之前选中的行清空。点击标题行的复选框则清空选中行。

<el-table :data="proList"
          ref="tableRef"
          @row-click="rowClick"
          @select-all="selectAll"
          @select="(selection,row)=>rowClick(row)"
          height="calc(100vh - 120px)"
          :header-cell-style="{background:'#F5F9FB ',color:'#333'}"
          border>
    <el-table-column type="selection" width="50" align="center">
    </el-table-column>
    <el-table-column prop="id" label="项目id" align="center">
    </el-table-column>
    <el-table-column prop="projectName" label="项目名称" align="center">
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center">
    </el-table-column>
</el-table>

函数。其中，selectedRows是自定义的一个数组，用于放置选中的行对象信息，以便在项目中其他地方使用。

/**
 * table行点击事件
 */
rowClick(row, column, event) {
    this.selectedRows = []
    this.$refs.tableRef.clearSelection()
    this.selectedRows.push(row)
    this.$refs.tableRef.toggleRowSelection(row)
},

/**
 * 选择所有checkbox点击事件
 */
selectAll(selection) {
    this.$refs.tableRef.clearSelection();
    this.selectedRows = []
}