如何在Ant Design的表格组件中实现数据跨行显示？

Question

如何在Ant Design的表格组件中实现数据跨行显示？

发布于
2024-04-11 山东

使用antd中的表格组件怎么实现数据跨行显示

一级目录有两个公司架构的字段，想要公司架构跨行显示。有两个公司架构的话跨两行，有三个的话跨三行显示，请问这个应该怎么实现呢？

<a-table size="middle" :columns="columns" :data-source="loadDatas" :pagination="false" bordered>
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'parentName'">
                        
                    </template>
</table>

parentName是一级目录的键名

下面这个是表格大概的数据

const loadDatas = [
    {
        button: [
            {
                id: '1571129529564758017',
                title: "新增机构"
            },
            {
                id: '1571129929961406466',
                title: "批量删除"
            },
            {
                id: '1571130756155408386',
                title: "编辑机构"
            },
        ],
        id:"1548901111999773978",
        module: "1548901111999773976",
        parentId: "1548901111999773977",
        parentName: "公司架构",
        title: "机构管理"
    },
    {
        button: [
            {
                id: '1571129529564758017',
                title: "新增机构"
            },
            {
                id: '1571129929961406466',
                title: "批量删除"
            },
            {
                id: '1571130756155408386',
                title: "编辑机构"
            },
        ],
        id:"1548901111999773978",
        module: "1548901111999773976",
        parentId: "1548901111999773977",
        parentName: "公司架构",
        title: "人员管理"
    },
    {
        button: [
            {
                id: '1571129529564758017',
                title: "编辑字典"
            },
            {
                id: '1571129929961406466',
                title: "批量删除"
            }
        ],
        id:"1548901111999773978",
        module: "1548901111999773976",
        parentId: "1548901111999773977",
        parentName: "业务字典",
        title: "业务字典"
    }
]

用的是vue2的写法

尝试使用了组件库自带的customCell属性，好像不太行，请问这个应该怎么实现

vue.js javascript 前端

阅读 798

AI BotBETA

在Ant Design的表格组件中，实现数据跨行显示通常需要使用rowSpan属性。rowSpan属性允许你指定一个单元格应该跨越多少行。

在你的场景中，你可以通过计算parentName字段来决定每个单元格应该跨越多少行。你需要遍历数据，计算每个parentName出现的次数，并据此设置rowSpan。

下面是一个简单的示例，展示了如何在Vue中使用Ant Design的a-table组件来实现数据跨行显示：

<template>
  <a-table :columns="columns" :dataSource="processedData" :components="components" bordered>
    <template #bodyCell="{ record, column, rowIndex }">
      <template v-if="column.dataIndex === 'parentName'">
        <span :row-span="record.spanCount">{{ record.parentName }}</span>
      </template>
      <template v-else>
        <span>{{ record[column.dataIndex] }}</span>
      </template>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      loadDatas: [
        // ... 你的数据
      ],
      columns: [
        // ... 你的列定义
      ],
      components: {
        body: {
          cell: {
            wrapper: ({ children, props }) => {
              if (props.rowSpan) {
                return <td style={{ height: 'auto' }}>{children}</td>;
              }
              return <td>{children}</td>;
            },
          },
        },
      },
    };
  },
  computed: {
    processedData() {
      const dataMap = {};
      const result = [];

      this.loadDatas.forEach((item) => {
        if (!dataMap[item.parentName]) {
          dataMap[item.parentName] = { count: 1, spanCount: 1 };
        } else {
          dataMap[item.parentName].count += 1;
          dataMap[item.parentName].spanCount += 1;
        }
      });

      this.loadDatas.forEach((item) => {
        const processedItem = { ...item };
        if (dataMap[item.parentName].count > 1) {
          processedItem.spanCount = dataMap[item.parentName].spanCount;
        }
        result.push(processedItem);
        dataMap[item.parentName].count -= 1;
      });

      return result;
    },
  },
};
</script>

在这个示例中，我们首先创建了一个dataMap来跟踪每个parentName的出现次数。然后，我们遍历loadDatas，为每个具有相同parentName的项增加计数。接下来，我们再次遍历loadDatas，为每个项添加spanCount属性，该属性表示该项应该跨越的行数。最后，我们在表格的单元格模板中使用row-span属性来指定单元格应该跨越的行数。

请注意，这个示例假设你的数据已经按照你想要的顺序进行了排序。如果你的数据没有按照顺序排序，你可能需要首先对其进行排序，以确保具有相同parentName的项相邻。

此外，这个示例使用了Vue 3的语法。如果你正在使用Vue 2，你可能需要稍微调整代码以适应Vue 2的语法。

1 个回答

得票最新

陟上晴明

21.5k145091

发布于
2024-04-11 浙江

就是行列合并啊……文档中不是有相应的Demo吗，直接对照着改就好了 👉 表格行/列合并

只不过你的合并条件需要自己判断，比如说有一些需要合并的item是错开的，可能还需要先给 dataSource 绑定的数据做一下排序。

图片.png