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

原文地址:https://blog.csdn.net/weixin_44042792/article/details/131682940

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年07月13日 09:41
下一篇 2023年07月13日 09:41