一.项目需求
表格可以多选，表头都是汉字。。。。类似于这种
二.实现功能
用到的方法
| 参数 | 说明 |
类型 |
可选值 |
默认值 |
header-cell-class-name |
表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String |
— |
— |
实现代码
HTML部分
<template><divclass="Box"><div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 500px"@selection-change="handleSelectionChange":header-cell-class-name="cellClass"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><templateslot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table></div></div></template>
JS部分
<script>exportdefault { name: "list", data () { return { tableData: [{ date: '2023-09-03', name: 'bug天选之子', address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343' }, { date: '2023-09-03', name: 'bug天选之子', address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343' }, { date: '2023-09-03', name: 'bug天选之子', address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343' }, { date: '2023-09-03', name: 'bug天选之子', address: 'https://blog.csdn.net/weixin_70245286?spm=1000.2115.3001.5343' },], multipleSelection: [], } }, methods: { // 选中的项handleSelectionChange (val) { this.multipleSelection=val; console.log("选中的项:", this.multipleSelection); }, // 修改多选框表头cellClass (row) { // 判断第几列if (row.columnIndex===0) { return"disableSelection"; } } }, mounted () { } } </script>
CSS部分
<stylescoped> .Box { display: flex; justify-content: center; align-items: center; } ::v-deep.el-table.disableSelection.cell.el-checkbox__inner { display: none; position: relative; } ::v-deep.el-table.disableSelection.cell::before { content: "选项"; position: absolute; right: 15px; } ::v-deep.el-table { border: 1pxsolidblue; } </style>
实现效果
三.总结
关键代码
// 在表格上绑定header-cell-class-name属性 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 500px" @selection-change="handleSelectionChange" :header-cell-class-name="cellClass"> // 在methods中判断确定是第一列然后给对应的class名 cellClass (row) { // 判断第几列 if (row.columnIndex === 0) { return "disableSelection"; } } // css做对应修改 // 隐藏多选框表头 ::v-deep.el-table .disableSelection .cell .el-checkbox__inner { display: none; position: relative; } // 替换后的表头内容（根据需求自行设置） ::v-deep.el-table .disableSelection .cell::before { content: "选项"; position: absolute; right: 15px; }
大家还有啥好方法评论区留言，互相学习哈哈
