ant design vue 子表格数据懒加载

在 Ant Design Vue 的子表格中，如果子表格的数据比较多，可以使用懒加载来优化性能，只有当用户需要查看子表格时才去加载数据。

首先，在子表格的 columns 中添加一个 render 函数，并在该函数中渲染一个按钮，当用户点击该按钮时触发事件。

<a-button type="link" @click="loadData(record)">查看详情</a-button>

接着，在子组件中定义一个方法 loadData，该方法根据 record 中的 id 去请求子表格数据，并将数据存储在子组件的 data 中。

loadData(record) {
  if (this.data[record.id]) {
    return;
  }
  axios.get('/api/subtable/' + record.id).then(response => {
    this.data[record.id] = response.data;
    this.$forceUpdate();
  });
}

注意，为了避免重复请求数据，我们在 data 中存储已经加载过的数据。

最后，在子表格的 render 函数中根据 data 中存储的数据来渲染子表格。

<a-table :dataSource="data[record.id]" :columns="subColumns" />

完整的代码示例：

<template>
  <a-table :dataSource="dataSource" :columns="columns">
    <template #expand="record">
      <a-table :dataSource="data[record.id]" :columns="subColumns" />
      <a-button type="link" @click="loadData(record)">查看详情</a-button>
    </template>
  </a-table>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
      ],
      subColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: 'Description',
          dataIndex: 'description',
          key: 'description',
        },
      ],
      data: {},
    };
  },
  mounted() {
    axios.get('/api/table').then(response => {
      this.dataSource = response.data;
    });
  },
  methods: {
    loadData(record) {
      if (this.data[record.id]) {
        return;
      }
      axios.get('/api/subtable/' + record.id).then(response => {
        this.data[record.id] = response.data;
        this.$forceUpdate();
      });
    },
  },
};
</script>