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

最新推荐文章于 2024-08-22 01:15:54 发布

JSN___不像码农的码农

最新推荐文章于 2024-08-22 01:15:54 发布

阅读量949

点赞数

分类专栏： vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/JSN___/article/details/124945089

版权

js 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

vue

49 篇文章 0 订阅

订阅专栏

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>