Ant Design of Vue多个表格

Question

Ant Design of Vue1.7.8版本中，如何使用a-table组件，循环生成多个表格，并且每一个表格的第一行进行列合并，而且每个表格都需要带分页，每个表格的头部字段是一样的

Answer 1

引自免费微信小程序：皆我百晓生

在Ant Design of Vue 1.7.8版本中，要实现多个表格的循环生成，并且每个表格的第一行进行列合并以及带有分页功能，你可以按照以下步骤编写代码。假设你有一个数组tableDataList，其中每个元素代表一个表格的数据源：

<template>
  <div>
    <!-- 循环遍历表格数据源 -->
    <div v-for="(tableData, index) in tableDataList" :key="index">
      <a-table :data-source="tableData.dataSource" bordered pagination="true" :columns="tableData.columns">
        <!-- 第一行使用自定义内容并实现列合并 -->
        <template slot="title" slot-scope="{ columns }">
          <tr>
            <th :colspan="columns.length">这是表格{{index + 1}}的合并标题</th>
          </tr>
          <tr>
            <!-- 根据实际列定义渲染表头 -->
            <th v-for="column in columns" :key="column.dataIndex">{{ column.title }}</th>
          </tr>
        </template>

        <!-- 分页组件 -->
        <template #pagination>
          <a-pagination
            v-model="tableData.pagination.current"
            :total="tableData.pagination.total"
            @change="onTableChange(index)"
            show-total
            show-size-changer
          />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { ATable, APagination } from 'ant-design-vue';

export default {
  components: {
    ATable,
    APagination,
  },
  data() {
    return {
      tableDataList: [
        // 每个表格的数据结构示例
        {
          dataSource: [...], // 表格数据列表
          columns: [...], // 表格列定义
          pagination: {
            current: 1, // 当前页码
            total: 50, // 总条数
          },
        },
        // 更多表格数据...
      ],
    };
  },
  methods: {
    onTableChange(tableIndex, page) {
      // 更新对应表格的当前页码
      this.tableDataList[tableIndex].pagination.current = page;
      // 这里模拟请求新的数据，实际项目中会根据页码和分页大小发起API请求
      // fetchNewData(tableIndex, page);
    },
  },
};
</script>

以上代码展示了一个基本的例子，你需要替换...为实际的表格数据和列定义。在onTableChange方法中，根据实际需求处理分页切换时的数据更新逻辑。

注意：上述代码没有包含实际的API调用以获取新数据，你需要自行实现这部分逻辑。此外，确保已正确安装并引入了ant-design-vue库。