ant design vue的expandedRowRender点击加载数据

在Ant Design Vue中，Table组件提供了一个expandedRowRender属性，可以用来自定义展开行后显示的内容。如果你想在点击展开行时加载数据，可以在expandedRowRender函数中实现异步数据加载。

以下是一个简单的例子，展示了如何在点击展开行时加载数据：

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :expandedRowKeys="expandedRowKeys"
    @expand="handleExpand"
  >
    <template slot="expandedRowRender" slot-scope="record">
      <!-- 这里可以放置加载中的占位符 -->
      <p v-if="loadingKeys.includes(record.key)">加载中...</p>
      <!-- 数据加载完毕后显示的内容 -->
      <p v-else>{{ record.extra }}</p>
    </template>
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
        // More columns...
      ],
      data: [
        { key: 0, name: 'John Doe', age: 32, extra: '' },
        // More data...
      ],
      loadingKeys: [],
      expandedRowKeys: []
    };
  },
  methods: {
    handleExpand(expanded, record) {
      if (expanded) {
        this.loadData(record.key);
      }
    },
    loadData(key) {
      this.loadingKeys.push(key);
      // 模拟异步加载数据
      setTimeout(() => {
        const item = this.data.find(item => item.key === key);
        if (item) {
          item.extra = '加载完成的数据内容';
        }
        this.loadingKeys = this.loadingKeys.filter(k => k !== key);
      }, 1000);
    }
  }
};
</script>

在这个例子中，expandedRowKeys用于控制哪些行是展开的，loadingKeys用于跟踪哪些展开行正在加载数据。handleExpand方法在行展开时被调用，并根据情况调用loadData方法。loadData方法将特定的key添加到loadingKeys数组中，并在1秒后模拟加载数据，加载完成后将数据填充到对应的记录中，并从loadingKeys数组中移除。

请注意，这个例子使用了setTimeout来模拟异步加载，并且假设了数据会在1秒内加载完成。在实际应用中，你需要替换这部分代码以实现与你的后端服务的交互。