el-table表格在表头和数据行添加图标、处理数据-蒲公英云

el-table表格在表头和数据行添加图标、处理数据

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