使用axios把接口数据动态传入ant design pro of vue框架制作的表格中

Question

<template> <div> <div style="margin-bottom: 16px"> <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start"> Reload </a-button> <span style="margin-left: 8px"> <template v-if="hasSelected"> {{ `Selected ${selectedRowKeys.length} items` }} </template> </span> </div> <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" /> </div> </template> <script> const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } export default { data() { return { data, columns, selectedRowKeys: [], // Check here to configure the default column loading: false, }; }, computed: { hasSelected() { return this.selectedRowKeys.length > 0; }, }, methods: { start() { this.loading = true; // ajax request after empty completing setTimeout(() => { this.loading = false; this.selectedRowKeys = []; }, 1000); }, onSelectChange(selectedRowKeys) { console.log('selectedRowKeys changed: ', selectedRowKeys); this.selectedRowKeys = selectedRowKeys; }, }, }; </script>

Answer 1

参考GPT和自己的思路：

好的，你的问题是如何使用axios动态传入接口数据到ant design pro of vue框架制作的表格中。

首先，你需要使用axios来进行异步请求获取接口数据。在vue组件中，可以在mounted生命周期函数中发送请求获取数据，然后将数据保存在组件的data属性中。例如：

import axios from 'axios';

export default {
  data() {
    return {
      data: [], // 存储接口数据
      columns: [...], // 列数组
      selectedRowKeys: [], // 选中的行的keys
      loading: false, // 表格加载状态
    };
  },
  mounted() {
    axios.get('/api/data').then(res => {
      this.data = res.data; // 将接口数据存储在data属性中
    }).catch(err => {
      console.log('请求出错:', err);
    });
  },
  ...
}

接下来，你需要将接口数据传递给ant design pro of vue框架的表格组件。具体来说，你需要将data属性绑定到a-table组件的: data-source属性上。例如：

<template>
  <div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data" // 将接口数据传递给data-source属性
    />
  </div>
</template>

这样，当接口数据请求成功后，a-table组件会自动渲染表格数据。

希望这可以帮助你解决你的问题！