elementui表格多选实现单选的效果

• ts写法
• 着重点

// 全选
on-select-all={this.onSelectAll}
// 选择多选触发
on-selection-change={this.selectItem}
// 模板，页面显示多选框
<el-table-column type="selection" reserve-selection={false} />
ref="multipleTable"

• 解释

  // 清空所有选中
  onSelectAll(): void {
    const self: any = this;
    self.$refs.multipleTable.clearSelection();
  }

  // 反选。只保留一个选中
  selectItem(rows: any): void {
    const self: any = this;
    if (rows.length > 1) {
      const newRows = rows.filter((it: any, index: number) => {
        if (index == rows.length - 1) {
          self.$refs.multipleTable.toggleRowSelection(it, true);
          return true;
        }
        self.$refs.multipleTable.toggleRowSelection(it, false);
        return false;
      });
      this.selectlist = newRows;
    } else {
      this.selectlist = rows;
    }
  }

• 完整代码

<el-card shadow="hover">
  <el-table
    height="400"
    data={this.tableData}
    ref="multipleTable"
    style="width: 100%"
    on-select-all={this.onSelectAll}
    on-selection-change={this.selectItem}
  >
    <el-table-column type="selection" reserve-selection={false} />
    <el-table-column
      prop="creater"
      label="创建人"
      width="100px"
    />
    <el-table-column
      label="详情"
      {...{
        scopedSlots: {
          default: (sdata: any): any => {
            return (
              <el-button
                type="primary"
                size="mini"
                on-click={this.queryDesc.bind(this, sdata.row)}
              >
                查 看
              </el-button>
            );
          }
        }
      }}
    />
  </el-table>
</el-card>