Element table表格设置表头、行、列或者指定单元格背景色

￡神魔★判官ぃ 2023-06-14 12:56 20阅读 0赞

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70][]

<template>
      <el-table
        :data="tableData"
        border
         :header-cell-style="rowClass"
         :cell-style="cellStyle" 
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
             >
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>   
      </el-table>
    </template>
    
    methods: {
        //设置表头的颜色
        rowClass({ row, rowIndex}) {
            console.log(rowIndex) //表头行标号为0
            return 'background:red'
          },
        //设置指定行、列、具体单元格颜色
        cellStyle({row, column, rowIndex, columnIndex}){
            if(rowIndex === 1 && columnIndex === 2){ //指定坐标rowIndex ：行，columnIndex ：列
            return 'background:red' //rgb(105,0,7)
        }else{
            return ''
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191119194101187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2,size_16,color_FFFFFF,t_70