Ant Design Vue 表格组件的数据加载与展示示例

本示例演示如何使用 Ant Design Vue 中的表格组件实现异步加载数据并进行展示。通过模拟后端 API 请求，获取数据并在表格中动态展示。

// 引入必要的 Ant Design Vue 组件
import { Table, Button, message } from 'ant-design-vue';

export default {
  data() {
    return {
      // 表格列配置
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '名称', dataIndex: 'name', key: 'name' },
        { title: '年龄', dataIndex: 'age', key: 'age' },
      ],
      // 存储从后端获取的数据
      dataSource: [],
      // 控制加载状态的标志
      loading: false,
    };
  },
  methods: {
    // 模拟后端 API 请求
    fetchData() {
      this.loading = true;
      // 模拟异步请求
      setTimeout(() => {
        // 假设后端返回的数据格式为 { data: [...] }
        this.dataSource = [{ id: 1, name: 'John', age: 25 }, { id: 2, name: 'Alice', age: 30 }];
        this.loading = false;
        message.success('数据加载成功');
      }, 1000);
    },
  },
  mounted() {
    // 组件挂载时触发数据加载
    this.fetchData();
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.fetchData}>刷新数据</Button>
        <Table
          columns={this.columns}
          dataSource={this.dataSource}
          loading={this.loading}
        />
      </div>
    );
  },
};

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com