最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

第一次使用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用于修改样式:

<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中Checkbox多选框的全选按钮并变换成汉字显示

结束语

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何去掉element-ui中Checkbox多选框的全选按钮并变换成汉字显示

发表评论