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

0 效果

1 单选

javascript 复制代码
<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. 通过修改样式不起作用

javascript 复制代码
.el-table__header-wrapper .el-checkbox {
  visibility: hidden; // 不起作用
  display: none; // 不起作用
}

2. 动态添加样式

javascript 复制代码
<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中添加两个属性

javascript 复制代码
if (this.clients.length != 0) {
  this.clientTableData.forEach(row => {
    if (row.id == this.clients[0].id) {
      this.$refs.clientTableRef.toggleRowSelection(row, true);
    }
  })
}
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹11 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript