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

最新推荐文章于 2024-10-10 11:07:27 发布

原创最新推荐文章于 2024-10-10 11:07:27 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了如何使用TypeScript开发一个带有多选功能的El-Table组件，涉及选中清空、反选操作，并展示了如何绑定`on-select-all`和`on-selection-change`事件。代码实例包括清空所有选中项和限制单选的实现。

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>