vue table 实现单选逻辑

table表格有时需要在每行前面添加一列实现可勾选对应行的状态，table默认是多选的逻辑，如果需要实现单选，需要结合table封装好的一些方法和事件

html部分：

  <el-table
            ref="multipleTable"
            :data="tableData"
            highlight-current-row
            @select-all="onSelectAll"
            @selection-change="selectItem"
            @row-click="onSelectOp"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="姓名" prop="name" align="center" />
            <el-table-column label="手机号码" prop="telephone" align="center" />
          </el-table>

  js部分：

 methods: {
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selectItem(rows) {
      if (rows.length > 1) {
        const newRows = rows.filter((it, index) => {
          if (index == rows.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.multipleSelection = newRows;
      } else {
        this.multipleSelection = rows;
      }
      this.userId = this.multipleSelection.length
        ? this.multipleSelection[0].guid
        : "";
    },
    onSelectOp(row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.multipleSelection = [];
      this.multipleSelection.push(row);
    },

    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.$refs.dataTree.setCheckedKeys([data.lobbyCode]);
      }
    },
}

 multipleSelection变量用于保存用户当前勾选的选项