element el-table组件修改表格表头和某个单元格背景色

最新推荐文章于 2025-06-25 18:00:24 发布

原创最新推荐文章于 2025-06-25 18:00:24 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

js 同时被 2 个专栏收录

75 篇文章

订阅专栏

vue

49 篇文章

订阅专栏

该篇博客展示了如何在Vue.js项目中利用element-ui库，通过`el-table`组件的`header-cell-style`和`cell-style`属性，动态地修改表格表头和单元格的背景色。示例代码详细演示了如何根据特定条件改变颜色，如当准点率低于90%时，将背景色设置为红色或黄色。

element el-table组件修改表格表头和某个单元格背景色

在这里插入图片描述

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column prop="city" label="省份" align="center">
      </el-table-column>
      <el-table-column prop="address" label="核算中心" align="center">
      </el-table-column>
      <!-- 合计 -->
      <el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumn" :key="index">
        <el-table-column prop="city" label="准点单数" align="center">
        </el-table-column>
        <el-table-column prop="address" label="总单数" align="center">
        </el-table-column>
        <el-table-column :prop="item.num" label="准点率" align="center">
        </el-table-column>
      </el-table-column>
      <!-- 日期1 -->
      <!-- <el-table-column label="3月1号" align="center">
        <el-table-column prop="city" label="准点单数" align="center">
        </el-table-column>
        <el-table-column prop="address" label="总单数" align="center">
        </el-table-column>
        <el-table-column prop="num1" label="准点率" align="center">
        </el-table-column>
      </el-table-column> -->
      <!-- 日期2 -->
      <!-- <el-table-column label="3月2号" align="center">
        <el-table-column prop="city" label="准点单数" align="center">
        </el-table-column>
        <el-table-column prop="address" label="总单数" align="center">
        </el-table-column>
        <el-table-column prop="num2" label="准点率" align="center">
        </el-table-column>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Tables",
  components: {},
  data() {
    return {
      tableData: [
        {
          city: "普陀区",
          address: "上海市",
          num: "95.5%",
          nums: "60.8%",
          numss: "67.3%",
          numsss: "90%"
        },
        {
          city: "普陀区",
          address: "上海市",
          num: "60.3%",
          nums: "90.8%",
          numss: "67.3%",
          numsss: "70%"
        },
      ],
      tableColumn:[
        {
          label:'合计',
          num: "num",
        },
        {
          label:'3月1号',
          num: "nums",
        },
        {
          label:'3月2号',
          num: "numss",
        },
        {
          label:'3月3号',
          num: "numsss",
        }
      ]
    };
  },
  mounted() {},
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      let rowBackground = {};
      if (
        (rowIndex == 0 && columnIndex == 2) ||
        (rowIndex == 1 && columnIndex == 2) ||
        (rowIndex == 1 && columnIndex == 1) ||
        (rowIndex == 1 && columnIndex == 0)
      ) {
        rowBackground.background = "#00f";
      }
      return rowBackground;
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex,this.cmpp(row.num,'90%'));
      let rowBackground = {};
      if (column.label == "准点率") {
        if (this.cmpp(row[column.property], "90%")) {
          rowBackground.background = "#f00";
        } else {
          rowBackground.background = "#ff0";
        }
      }
      return rowBackground;
    },
    cmpp(a, b) {
      return Number(a.replace("%", "")) < Number(b.replace("%", ""));
    },
  },
};
</script>
<style scoped></style>