通过header插槽自定义表头:
<template slot="header" slot-scope="scope">
...
</template>
可以通过scope.row.columnName 获取单元项数据进行数据处理:
<template slot-scope="scope">
<span :class="1<2 ? 'red-font' : 'blue-font' ">
{
{formatDate(scope.row.temperature)}} ℃
</span>
</template>
如图:
<el-table :data="currentCabinData"
style="width: 100%" stripe border height="100">
<el-table-column prop="name"
label="设备仓" fixed>
</el-table-column>
<el-table-column prop="temperature" >
<!-- 表头项 -->
<template slot="header"
slot-scope="scope">
<span class="mgrinr1">温度</span>
<d2-icon name="thermometer-2"
style="font-size: 18px;" />
</template>
<!-- 行数据项 -->
<template slot-scope="scope">
{
{ scope.row.temperature }} <!-- scope.row.prop -->
<span v-show="scope.row.temperature"
class="unit-color">℃</span>
</template>
</el-table-column>
<el-table-column prop="humidity">
<template slot="header"
slot-scope="scope">
<span class="mgrinr1">湿度</span>
<d2-icon name="tint"
style="font-size: 18px;" />
</template>
<template slot-scope="scope">
{
{ scope.row.humidity }}
<span v-show="scope.row.humidity"
class="unit-color">%</span>
</template>
</el-table-column>
</el-table>
上述el-table中关键字可以实现border纵向边框、stripe斑马线、固定表头或表列、多级表头、最小表高度、行单选、多选、数据过滤、展开行数据、树形数据懒加载、自定义表头、行尾统计、合并行或列等效果
使用header-cell-style属性修改表头样式,可为函数或对象:
使用cell-style属性更改表格中某个单元格的样式,可为函数或对象:
<!-- html -->
<el-table :header-cell-style="rowClass" :cell-style="cellStyle">
</el-table>
//在method里面写上方法
cellStyle({row, column, rowIndex, columnIndex}){
if(rowIndex === 1 && columnIndex === 2){ //指定坐标
return 'background:pink'
}else{
return ''
}
}