表格取消全选框,用文字表示--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>
二.给 方法(这个方法主要就是给表格所需要的列添加类名。)具体可以看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;
}
本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/13535735.html