微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

修改elementUI、table复选框的全选功能禁用或者隐藏去掉全选checkBox换成汉字

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

		<el-table
           ref="mulChoose"
           :data="chooseList"
           style="width: 100%"
           :row-style="{height:'46px'}"
           :cell-style="{padding:'0'}"
           :header-cell-class-name="cellClass"
           highlight-current-row
           height="500"
           tooltip-effect="dark"
           @select="selectRow">
           <el-table-column
             type="selection"
             width="50">
           </el-table-column>
         </el-table>

判断是否是表头:

		cellClass(row){
            console.log(row)
            if (row.columnIndex === 0) {
                return 'disableSelection'
            }
        },

添加样式

.el-table .disableSelection .cell .el-checkBox__inner{
        display: none;
        position: relative;
      }
      .el-table .disableSelection .cell:before{
        content: "";
        position: absolute;
        // right: 11px;
      }

最终实现:

实现效果

粥萌_ 发布了3 篇原创文章 · 获赞 0 · 访问量 33 私信 关注

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐