vue3 elemnetPlus table 数据id 相同的合并单元格

<template>
  <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      { id: 1, name: 'Alice' },
      { id: 1, name: 'Bob' },
      { id: 2, name: 'Charlie' },
      { id: 2, name: 'David' }
    ]);
 
    const idMap = new Map(); // 用于存储每个id连续出现的次数和起始行索引
    tableData.value.forEach((row, index) => {
      if (!idMap.has(row.id)) {
        idMap.set(row.id, { count: 1, startIndex: index });
      } else {
        const { count, startIndex } = idMap.get(row.id);
        idMap.set(row.id, { count: count + 1, startIndex });
      }
    });
 
    const arraySpanMethod = ({ row, column, rowIndex }) => {
      if (column.property === 'id') {
        const { count, startIndex } = idMap.get(row.id);
        if (rowIndex === startIndex) {
          return [count, 1]; // 在起始行，跨越count行，1列
        } else {
          return [0, 0]; // 其他行，不显示（被合并了）
        }
      } else {
        return [1, 1]; // 其他列，正常显示
      }
    };
 
    return {
      tableData,
      arraySpanMethod,
    };
  },
};
</script>

原文地址：https://blog.csdn.net/m0_65730686/article/details/143578689

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！