【项目经验】：elementui表格中表头的多选框换成文字

2023-09-03 172

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： elementui表格表头多选框换成文字

一.项目需求

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

二.实现功能

用到的方法

参数	说明	类型	可选值	默认值
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;
}

大家还有啥好方法评论区留言，互相学习哈哈