Ant Design Vue 表格合并和折叠展开的一种方法

<template>
  <a-table :columns="columns" :dataSource="data" :pagination="false">
    <!-- 自定义展开列 -->
    <template slot="expandedRowRender" slot-scope="record">
      <p>{{ record.description }}</p>
    </template>
 
    <!-- 自定义行合并 -->
    <template slot="name" slot-scope="text, record, index">
      <span v-if="index === 0">{{ text }}</span>
    </template>
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      // 表格列定义
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Address', dataIndex: 'address', key: 'address' },
        {
          title: 'Action',
          dataIndex: '',
          key: 'x',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 表格数据
      data: [
        {
          key: '1',
          name: 'John Doe',
          age: 32,
          address: '101 Street Name, City, State',
          description: 'This is the description for John Doe',
        },
        // ...更多数据
      ],
    };
  },
};
</script>

这个代码实例展示了如何在Ant Design Vue的a-table组件中使用自定义的展开列和行合并。expandedRowRender用于自定义当行展开时显示的内容，而name列的scopedSlots用于根据条件合并行。这些功能可以根据实际需求进行调整和扩展。