如何给基于Element-UI的表格添加背景颜色

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

小菜鸡记录一下学习到的知识，如有错误欢迎指正

---

一、如何给基于Element-UI的表格添加背景颜色？

根据项目的要求给相对应的行填加背景颜色和设置字体样式。

二、使用步骤

1.复制Element-UI的Table

代码如下（示例）：
第一种实现方式：

<el-table
    v-loading="loading"
    :data="tableData"
    :row-class-name="className"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

第二种实现方式：

<el-table
    v-loading="loading"
    :data="tableData"
    :row-class-name="className"
    style="width: 100%">
    <el-table-column
      prop="0"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="1"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="2"
      label="地址">
    </el-table-column>
  </el-table>

2.js实现代码

代码如下（示例）：
第一种实现方式：

   // 合计行添加样式
    className(row) {
      let result = row.rowIndex;
      if(result === 0){
        return "heji"
      }else if(result === 1){
        return "heji"
      }
      else if(result === 2){
        return "heji"
      }
      else if(result === 3){
        return "heji"
      }
      else if(result === 4){
        return "heji"
      }else if(row.row.name === "园区1"){
        return "xbiaoti";
      }else if (row.row.name === "园区2") {
        return "xbiaoti";
      } else if (row.row.name === "园区3") {
        return "xbiaoti";
      } else if (row.row.name === "园区4") {
        return "xbiaoti";
      } else{
        return ""
      }
    },

第二种实现方式：

className1(row) {
      let result = row.rowIndex;
      let arr = row.row;
      if (arr[0].indexOf("行业合计") > -1) {
        return "heji";
      } else if (result === 1) {
        return "heji";
      } else if (result === 2) {
        return "heji";
      } else if (result === 3) {
        return "heji";
      } else if (result === 4) {
        return "heji";
      } else if (arr[0].indexOf("行业1合计") > -1) {
        return "heji";
      } else if (arr[0].indexOf("行业2合计") > -1) {
        return "heji";
      } else if (arr[0].indexOf("行业3合计") > -1) {
        return "heji";
      } else if (arr[0].indexOf("行业4合计") > -1) {
        return "heji";
      } else if (arr[0].indexOf("园区1") > -1) {
        return "xiaoji";
      } else if (arr[0].indexOf("园区2") > -1) {
        return "xiaoji";
      } else if (arr[0].indexOf("园区3") > -1) {
        return "xiaoji";
      } else if (arr[0].indexOf("园区4") > -1) {
        return "xiaoji";
      } else {
        return "";
      }
    },

3.css实现代码

.heiji {
  background-color: skyblue !important;
  color: black;
}
.xbiaoti {
  background-color: skyblue !important;
  color: black;
}

总结

调用row-class-name方法，行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。