码云笔记前端博客
Home > 前端技术 > 如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示

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

2019-08-14 分类:前端技术 作者:码云 阅读(288)

本文共计1170个字,预计阅读时长需要3分钟。

第一次使用element-UI组件,所以一路是遇到问题解决问题,解决一个问题又遇到一个问题,所以每次解决完问题,我都会记录下笔记,比如element-ui 的table多选怎么把全选功能的checkbox换成汉字,没换之前如下图:
如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示
而我是想改成这样的:
如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示
在解决这个问题之前请大家自己想想如果你遇到这个问题如何解决?

介绍一下相关知识

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

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

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

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

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

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

1
2
3
4
5
6
7
<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方法中

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

CSS样式:

1
2
3
4
5
6
7
8
.el-table /deep/.disabledCheck .cell .el-checkbox__inner{
    display: none!important;
  }
.el-table /deep/.disabledCheck .cell:before{
    content: '选择';
    position: absolute;
    right: 11px;
}

最终实现了我们想要的效果:
如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示

结束语

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(8) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
8

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

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

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论