el-table实现单选和隐藏全选框和回显数据

原创已于 2023-11-09 19:07:59 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

于 2023-11-09 16:24:25 首次发布

本文介绍了如何在Vue的ElementUI表格中隐藏全选框，通过修改样式和动态添加CSS类实现，并讨论了如何在数据回显时重新选中特定行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0 效果

在这里插入图片描述

1 单选

<el-table ref="clientTableRef" @selection-change="clientChangeHandle">
  <el-table-column fixed type="selection" width="50" align="center" />
  <el-table-column label="客户名称" align="center" prop="clientName" />
  <el-table-column label="客户类型" align="center" prop="clientTypeName" />
  <el-table-column label="业务类型" align="center" prop="businessTypeName" />
  <el-table-column label="区域" align="center" prop="regionDetail" />
</el-table>
clientChangeHandle(selection) {
  this.clientIds = []
  if (selection.length > 1) {
    this.$refs.clientTableRef.clearSelection()
    this.$refs.clientTableRef.toggleRowSelection(selection[selection.length - 1])
  }
  this.clientIds = selection[selection.length - 1] ? [selection[selection.length - 1]] : []
},

2 隐藏全选框

1. 通过修改样式不起作用

.el-table__header-wrapper .el-checkbox {
  visibility: hidden; // 不起作用
  display: none; // 不起作用
}

2. 动态添加样式

<el-table :header-cell-class-name="hideSelectAll">
  <el-table-column fixed type="selection" width="50" align="center" />
  <el-table-column label="客户名称" align="center" prop="clientName" />
  <el-table-column label="客户类型" align="center" prop="clientTypeName" />
  <el-table-column label="业务类型" align="center" prop="businessTypeName" />
  <el-table-column label="区域" align="center" prop="regionDetail" />
</el-table>
hideSelectAll({ row, cloumn, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    return "hideSelectAll";
  }
}
::v-deep {
    .hideSelectAll .cell {
       visibility: hidden;
    }
}

3 回显

回显数据要在el-table中添加两个属性
在这里插入图片描述

if (this.clients.length != 0) {
  this.clientTableData.forEach(row => {
    if (row.id == this.clients[0].id) {
      this.$refs.clientTableRef.toggleRowSelection(row, true);
    }
  })
}