Vue3 el-table根据pid和上一级id相同递归合并单元格

Vue3 中的 `el-table` 组件可以根据 `pid` 和上一级的 `id` 相同来进行递归合并单元格，这通常用于数据的分组展示，比如树形结构的数据。下面是一个简单的示例，使用 `v-for` 遍历嵌套的对象数组，并通过递归处理判断是否需要合并单元格：

<template>
  <el-table :data="treeData">
    <el-table-column prop="name" label="名称"></el-table-column>
    <!-- 添加一个计算属性来合并单元格 -->
    <el-table-column
      v-if="isSameParent(row.pid, row.parentId)"
      show-overflow-tooltip
      render-cell="renderCell"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 模拟树形数据，包含 pid 和 parentId 属性
        { id: 1, name: 'A', pid: null, parentName: '', children: [] },
        { id: 2, name: 'B', pid: 1, parentName: 'A', children: [{ id: 3, name: 'B1' }, { id: 4, name: 'B2' }] },
        // ... 其他节点
      ],
    };
  },
  methods: {
    isSameParent(pid, parentId) {
      return pid === parentId;
    },
    renderCell(h, { row }) {
      if (row.children.length > 0) {
        return h('div', { style: 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' }, row.name);
        // 这里可以使用递归，如果还有子级，继续渲染并合并
        // 如果没有子级，渲染单行内容
      } else {
        return row.name;
      }
    },
  },
};
</script>

在这个例子中，我们首先检查当前行的 `pid` 是否等于其父级的 `id`，如果是则会进入 `renderCell` 方法中的递归部分。当有子节点时，我们会合并显示所有子节点的名称，直到遇到没有子节点的节点为止。