element-ui selection 选择列自定义表头；

Hell_AngelHW

已于 2023-05-11 13:40:03 修改

阅读量1.3k

点赞数 2

文章标签： vue.js elementui javascript

于 2023-05-11 11:45:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41725253/article/details/130618578

版权

通过CSS样式修改，可以将选择列表头的全选选项替换为自定义文字。具体实现包括设置文本居中，用自定义文字替换:before内容，并隐藏原有的复选框元素。详细步骤和更多样式调整可参考相关博客文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

如图：需求是把选择列表头的全选去掉改为文字

实现方案：

使用css即可：

.el-table .el-table__header .el-table-column--selection{
 text-align: center;
}
.el-table .el-table__header .el-table-column--selection .cell:before{
 content: '自定义文字';
}
.el-table .el-table__header .el-table-column--selection .el-checkbox{
 display: none;
}

其他更丰富可参考：https://blog.youkuaiyun.com/i_am_a_div/article/details/126885629