ElementUi 表格取消全选框，用文字表示

Posted 2021-03-17 jinxinyuan

Echarts ElementUi 表格取消全选框，用文字表示

1.先看看实现的图

一. 添加添加复选框列

 <el-table  v-loading="zongShipLoading" tooltip-effect="dark" :header-cell-class-name="cellClass" height="350" ref="changeTable" @select="shipTableDataChange" :data="shipTableData">
      <el-table-column  type="selection" width="55"></el-table-column>
      <el-table-column property="vesselNameCn" label="中文名称"></el-table-column>
      <el-table-column property="vesselNameEn" label="英文名称"></el-table-column>
      <el-table-column property="mmsi" label="MMSI"></el-table-column>
      <el-table-column property="equipmentCode" label="设备编码"></el-table-column>
</el-table> 

二.给<el-table :header-cell-class-name="cellClass"> 方法（这个方法主要就是给表格所需要的列添加类名。）具体可以看ElementUi的表格API

<el-table  :header-cell-class-name="cellClass"></el-table>


 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;
}

希望对大家有帮助。 结束...