网站数据统计,广州网站建设案例,狮山建网站,网站首页设计素材一.项目需求 表格可以多选#xff0c;表头都是汉字。。。。类似于这种 二.实现功能 用到的方法 Table Attributes 参数说明类型可选值默认值header-cell-class-name表头单元格的 className 的回调方法#xff0c;也可以使用字符串为所有表头单元格设置一个固定的 className。…一.项目需求 表格可以多选表头都是汉字。。。。类似于这种 二.实现功能 用到的方法
Table Attributes 参数说明类型可选值默认值header-cell-class-name表头单元格的 className 的回调方法也可以使用字符串为所有表头单元格设置一个固定的 className。Function({row, column, rowIndex, columnIndex})/String—— 实现代码可复制直接跑
HTML部分
templatediv classBoxdivel-table refmultipleTable :datatableData tooltip-effectdark stylewidth: 500pxselection-changehandleSelectionChange :header-cell-class-namecellClassel-table-column typeselection width55/el-table-columnel-table-column label日期 width120template slot-scopescope{{ scope.row.date }}/template/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress 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?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.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 refmultipleTable :datatableData tooltip-effectdark stylewidth: 500pxselection-changehandleSelectionChange :header-cell-class-namecellClass
// 在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;
}
大家有啥更好的方法评论区留言
