el-table合并单元格

1. 代码

<template>
  <div>
    <el-table border :span-method="arraySpanMethod" :data="tableData" 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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2",
          name: "虎",
          address: "上海市普518 弄"
        },
        {
          date: "2",
          name: "虎",
          address: "上海陀区金沙江路7 弄"
        },
        {
          date: "2",
          name: "王",
          address: "上9 弄"
        },
        {
          date: "3",
          name: "王",
          address: "上海市普陀区金沙江路 1516 "
        },
        {
          date: "5",
          name: "王小",
          address: "陀区金沙江路 1518 弄"
        },
        {
          date: "4",
          name: "王小",
          address: "上海市517 弄"
        },
        {
          date: "2",
          name: "小虎",
          address: "上海市普陀区金沙路 1519 弄"
        },
        {
          date: "2",
          name: "小虎",
          address: "上海市普陀江路 1516 弄"
        }
      ]
    };
  },
  created() {
    this.mergeYear(this.tableData);
  },
  methods: {
    mergeYear(arr) {
      let tempArr = [1],
        index = 0;
      arr.reduce((acc, cur, _index, _arr) => {
        if (acc.date !== cur.date) {
          tempArr[_index] = 1;
          index = _index;
        } else {
          tempArr[index]++;
        }
        return cur;
      });
      arr.forEach((ele, index) => {
        ele.rowspan = tempArr[index] || 0;
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    }
  }
};
</script>

文章来源地址https://uudwc.com/A/nJ1VV