<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>

/*

//动态添加行或列 需要 在监听处清空map  idMap.clear();

watchEffect(() => {

  idMap.clear();

  tableData.value = final.value.list;

  tableData.value.forEach((row, index) => {

    let id = getpropertyId(row)

    if (!idMap.has(id)) {

      idMap.set(id, { count: 1, startIndex: index });

    } else {

      const { count, startIndex } = idMap.get(id);

      idMap.set(id, { count: count + 1, startIndex });

    }

  });

})

*/