elementUi 表格取消全选框，用文字表示（亲测有效，拿过来直接用）

最新推荐文章于 2024-07-23 14:53:44 发布

Kimser

最新推荐文章于 2024-07-23 14:53:44 发布

阅读量1.2k

点赞数 3

本文链接：https://blog.csdn.net/Kimser/article/details/107975973

版权

1.先看看实现的图

一. 方法（这个方法主要就是给表格所需要的列添加类名）具体可以看ElementUi的表格API:header-cell-class-name="cellClass" （多余的不用管）

<el-table
        class="box"
        :data="tableData"
        :height="height"
        tooltip-effect="dark"
        :row-style="selectedHighlight"
        :header-cell-class-name="cellClass"  添加class
        @selection-change="handDrawer"
      >

二. methods：

 cellClass(row){     
    if (row.columnIndex === 0) {           
     return 'disabledCheck'     
    } 
},
// 备注：cellClass()方法主要给复选框那一列添加 类名为 ‘disabledCheck’

三.css样式设置：

/* 去掉全选按钮 */
.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important; 
}

.el-table .disabledCheck .cell::before{
    content: '选择';
    text-align: center;
    line-height: 37px;
}