javascript - 使用 Vue 和 Ant Design Table 显示来自 Ajax 的数据

Question

我是 Vue 新手，仍在学习使用它。我一直在关注此页面的示例:https://vue.ant.design/components/table/

我正在尝试使用 json 获取数据并使用 Antd 表显示。

但是我使用 and 手动包含了 js 和 css。

正如我从记录的控制台中看到的那样，数据调用很好。但该表未显示任何记录。

我一直在尝试在这里编写代码: https://jsfiddle.net/dedychaidir/yvr5o8Lk/4/

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.13/dist/antd.css" />

    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.13/dist/antd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

    <div id="app">
    <template>
        <a-table :columns="columns" :rowKey="record => record.login.uuid" :dataSource="data" :pagination="pagination" :loading="loading" @change="handleTableChange">
        <template slot="name" slot-scope="name">
            {{name.first}} {{name.last}}
        </template>
        </a-table>
    </template>
    </div>

这是脚本部分:

        const columns = [{
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    width: '20%',
    scopedSlots: {
        customRender: 'name'
    },
    }, {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [{
        text: 'Male',
        value: 'male'
        },
        {
        text: 'Female',
        value: 'female'
        },
    ],
    width: '20%',
    }, {
    title: 'Email',
    dataIndex: 'email',
    }];

    var app = new Vue({
    el: "#app",
    mounted: function() {
        this.fetch();
    },
    data: function() {
        return {
        data: [],
        pagination: {},
        loading: false,
        columns,
        }
    },
    methods: {
        handleTableChange(pagination, filters, sorter) {
        console.log(pagination);
        const pager = {
            ...this.pagination
        };
        pager.current = pagination.current;
        this.pagination = pager;
        this.fetch({
            results: pagination.pageSize,
            page: pagination.current,
            sortField: sorter.field,
            sortOrder: sorter.order,
            ...filters,
        });
        },
        fetch(params = {}) {
        this.loading = true;
        this.$http.get('https://randomuser.me/api',{params:{results:"10"}}).then(response => {
        json = JSON.parse(response.bodyText);
            const pagination = {
            ...this.pagination
            };
            pagination.total = 200;
            this.loading = false;
            this.data = json.results;
            this.pagination = pagination;

            console.log(this.data);
        }, response => {
            console.log(response.body);
        });
        },
    },
    });

如果有错误或错误，请告诉我。

谢谢。

Answer 1

我用提供的代码为您制作了codesandbox，一切正常。

https://codesandbox.io/embed/vue-template-pluqh

不确定，但也许您只需要先删除 <template>里面的标签div#app因为没有必要