如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示

第一次使用element-UI组件，所以一路是遇到问题解决问题，解决一个问题又遇到一个问题，所以每次解决完问题，我都会记录下笔记，比如element-ui 的table多选怎么把全选功能的checkbox换成汉字，没换之前如下图：

而我是想改成这样的：

在解决这个问题之前请大家自己想想如果你遇到这个问题如何解决？

介绍一下相关知识

css关于/deep/的解释和用法

/deep/深度选择器用于将全局的组件或者类的样式转换为局部的类从而达到在scoped内部添加样式后起作用的目的。

我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

就比如我们接下来实现的这个效果，我们使用了element的CheckBox多选框组件，此时CheckBox已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响，所以我们想要修改这个地方的样式，在其他页面用到CheckBox的时候不变，我就可以用/deep/了

我的解决方法很简单，就是先把checkbox框给隐藏掉，然后用position定位把文字放上去，嘿嘿，是不是很简单。

第一步：使用header-cell-class-name 给表头单元格设置一个className用于修改样式：

在methods方法中

cellClass(row){     if (row.columnIndex === 0) {//你需要判断的条件           return 'disabledCheck'     } },

CSS样式：

.el-table /deep/.disabledCheck .cell .el-checkbox__inner{     display: none!important;   } .el-table /deep/.disabledCheck .cell:before{     content: '选择';     position: absolute;     right: 11px; }

最终实现了我们想要的效果：

结束语

以上就是今天element-ui 的table多选怎么把全选功能的checkbox换成汉字的实现方法，当然我的方法只供参考，相信大家会有更好的办法，欢迎留言指正，共同学习。

文章来源：码云笔记 https://www.mybj123.com/4432.html