百姓网征婚百度快照优化培训班

一.项目需求

        表格可以多选，表头都是汉字。。。。类似于这种

        

二.实现功能

• 用到的方法

Table Attributes

参数	说明	类型	可选值	默认值
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—	—

• 实现代码（可复制直接跑）

HTML部分

<template><div class="Box"><div><el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 500px"@selection-change="handleSelectionChange" :header-cell-class-name="cellClass"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table></div></div>
</template>

js部分

<script>
export default {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部分

<style scoped>
.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: 1px solid blue;
}
</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;
}

大家有啥更好的方法评论区留言