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

ゞ浴缸里的玫瑰 2021-07-27 02:58 883阅读 0赞

### 通过header插槽自定义表头： ###

### 可以通过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 }}    
                          <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属性更改表格中某个单元格的样式，可为函数或对象： ###

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