element ui el-table 多选表头多选框替换文字

最新推荐文章于 2024-10-09 09:11:54 发布

原创最新推荐文章于 2024-10-09 09:11:54 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何使用CSS样式修改ElementUI的el-table组件，实现多选表头的全选文字替换，通过覆盖默认的checkbox内联元素并添加自定义内容，达到显示‘全选’字样的效果。

element ui el-table 多选表头多选框替换文字

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner {
	//   margin-left: -30px;
	display: none;
	position: relative;
}
.el-table /deep/.DisabledSelection .cell:before {
	content: '多选';
	position: absolute;
	right: 15px;
}

在这里插入图片描述

element ui el-table 多选表头增加全选字样

/*表格表头全选*/
	.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
	  margin-left: -30px;
	  position:relative;
	}
	.el-table /deep/.DisabledSelection .cell:before{
	  content:"全选";
	  position:absolute;
	  right:11px;
	}