修改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 · 访问量 40
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览