element el-table表格数据合并

针对前面文章中的数据合并出错时element表格列相同值自动合并单元格_天气晚来秋~的博客-CSDN博客

，可用下面这种方式行合并

这个可用单个，多个可自己按照逻辑多封装一下

话不多说，上代码

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :span-method="objectSpanMethod"
  >
    <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>
</template>

<script>
export default {
  name: "table",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      arr1: [],
    };
  },
  created() {
    this.setdates(this.tableData);
  },
  methods: {
    setdates(arr) {
      const obj = {};
      let k;
      for (let i = 0, len = arr.length; i < len; i++) {
        k = arr[i].date; //需要合并的字段
        if (obj[k]) obj[k]++;
        else obj[k] = 1;
      }
      //保存结果{el-'元素'，count-出现次数}
      for (const o in obj) {
        for (let i = 0; i < obj[o]; i++) {
          if (i === 0) {
            this.arr1.push(obj[o]);
          } else {
            this.arr1.push(0);
          }
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.arr1[rowIndex];
        const _col = this.arr1[rowIndex] > 0 ? 1 : 0;
        return [_row, _col];
      }
    },
  },
};
</script>
<style scoped>
</style>