vue element table表格合计数值 合并单元格

<template>
  <div>
    <el-table
      :data="tableData"
      :cell-class-name="columnStyle"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="num1" label="数值 1" align="center">
      </el-table-column>
      <el-table-column prop="num2" label="数值 2" align="center">
      </el-table-column>
      <el-table-column prop="num3" label="数值 3" align="center">
      </el-table-column>
      <el-table-column prop="num4" label="数值 4" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          id: "1",
          name: "工区1",
          num1: "11",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "2",
          name: "工区1",
          num1: "11",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "8",
          name: "工区1",
          num1: "11",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "3",
          name: "工区2",
          num1: "11",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "4",
          name: "工区2",
          num1: "11",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "5",
          name: "工区3",
          num1: "539",
          num2: "20",
          num3: 12,
          num4: 100,
        },
        {
          id: "6",
          name: "工区3",
          num1: "539",
          num2: "20",
          num3: 12,
          num4: 100,
        },
      ],
      dataArr: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    let newArr = [];
    // 数据分类
    this.tableData.forEach((item) => {
      const parent = this.dataArr.find((c) => c.name === item.name);
      if (parent) {
        parent.childs.push(item);
      } else {
        const obj = {
          name: item.name,
          childs: [item],
        };
        this.dataArr.push(obj);
      }
    });

    // 增加合计
    this.dataArr.forEach((item) => {
      let obj = {
        name: "",
        num1: 0,
        num2: 0,
        num3: 0,
        num4: 0,
      };
      item.childs.forEach((items) => {
        obj.num1 = "合计";
        obj.name = items.name;
        obj.num2 += items.num2 * 1;
        obj.num3 += items.num3 * 1;
        obj.num4 += items.num4 * 1;
      });
      item.childs.push(obj);
    });

    // 扁平化数组 增加sameName判断合并行
    this.dataArr.forEach((item) => {
      item.childs[0].sameName = item.childs.length;
      item.childs.forEach((items) => {
        newArr.push(items);
      });
    });
    this.tableData = newArr;

    // 增加length判断合并列
    for (let i = 0; i < this.tableData.length; i++) {
      if (this.tableData[i].num1 === "合计") {
        this.tableData[i].length = i
      }
    }
  },
  beforeDestroy() {},
  methods: {
    /**
     * row:表格行
     * column:表格列
     * rowIndex：表格行下标
     * columnIndex：表格列下标
     * */
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let cs = 2; // 合并列数
      let ci = 2; // 开始合并位置
      let num = ci + 1;
      // 合并列
      for (let i = num; i < cs + ci; i++) {
        if (rowIndex === row.length) {
          if (columnIndex === ci) {
            return {
              rowspan: 1,
              colspan: cs,
            };
          } else if (columnIndex === i) {
            return [0, 0];
          }
        }
      }

      // 合并行
      if (columnIndex === 1) {
        if (row.sameName) {
          return {
            rowspan: row.sameName,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    // 合计加背景颜色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].num1 === "合计") {
          if (rowIndex === i) {
            if (columnIndex >= 2) {
              return "total";
            }
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
::v-deep {
  .total {
    background: #f5f7fa;
  }
}
</style>