如何去掉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 用于修改样式：

<el-table ref="multipleTableRole"
 :row-key="getRowKeys"
 :data="roleDataTable"
 @select-all="addOrDelArrAll"
 :header-cell-class-name="cellClass"
stripe tooltip-effect="dark"
@selection-change="roleHandleSelectionChange" style="width: 100%">

在 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 换成汉字的实现方法，当然我的方法只供参考，相信大家会有更好的办法，欢迎留言指正，共同学习。

以上关于如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。