element ui 表格 合并相同内容

element ui 表格 合并相同内容 思路: 就是element ui 不是要 传入 rowSpan 和colSpan来进行控制合并, 所以对数据进行了处理. 对于一列相同的数据给第一个设置 rowSpan, 后面几个相同的rowSpan设置为0用来隐藏.

直接上代码, 两个文件

// test.vue
<template>
  <el-table
    border
    :data="tableData"
    :span-method="objectSpanMethod"
    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-column prop="num" label="数目"> </el-table-column>
  </el-table>
</template>
<script>
//引入封装的js
import mergeSameData from "./tool.js";
export default {
  data() {
    return {
      tableData: [
        {
          date: "date1",
          name: "name",
          address: "address2",
          num: "num",
        },
        {
          date: "date2",
          name: "name",
          address: "address2",
          num: "num",
        },
        {
          date: "date3",
          name: "name",
          address: "address3",
          num: "num",
        },
      ],
      spanObj: {},
      keyArr: ["date", "name", "address", "num"],
    };
  },
  created() {
    this.tableData = mergeSameData(this.tableData, this.keyArr);
    console.log("created -> this.tableData", this.tableData)
    //动态渲染 请渲染数剧结束后在执行此方法
    // this.spanObj = dataMethod(this.tableData);
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // rowspan 0, colspan 0的时候就会隐藏这个元素, rows为多少时, 就相当于多少行合并, cols多少列合并
      return {
        rowspan: row[column.property + "Row"],
        colspan: row[column.property + "Row"] === 0 ? 0 : 1,
      };
    },
  },
};
</script>

// tool.js
function mergeSameData(tableData, keyArr) {
  tableData.forEach((item, index) => {
    keyArr.forEach((keyItem, keyIndex) => {
      let preIndex = item[keyItem + "Index"] || 0;
      if (
        index > 0 &&
        item[keyItem] === tableData[index - 1][keyItem]
      ) {
        // 如果当前数据和上一条数据相同

        tableData[index][keyItem + "Row"] = 0;
        // 记住下标, 用于计算相同的

        tableData[index + 1] &&
          (tableData[index + 1][keyItem + "Index"] = preIndex);

        // 相同的row进行+1
        tableData[preIndex][keyItem + "Row"] =
          (tableData[preIndex][keyItem + "Row"] || 1) + 1;
      } else {
        tableData[index + 1] &&
          (tableData[index + 1][keyItem + "Index"] = index);
        // 对于不相同的, 直接返回1
        tableData[index][keyItem + "Row"] = 1;
      }
    });
  });
  return tableData;
}

export default mergeSameData;

实现效果:

问题记录: