使用Vue和Ant设计表显示Ajax中的数据

Question

I am new in Vue and still learning using it. I've been following example from this page: https://vue.ant.design/components/table/

I'm trying to fetch data using json to be displayed using Antd Tables.

But I include the js and css manually using and .

The data calling is fine as i can see from the console logged. But the table is not displaying any records.

I've been trying to code in here: 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>

And this is the script section:

        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);
        });
        },
    },
    });

Please show me if there are some error or mistakes.

Thank you.

Answer 1

I made codesandbox for you with provided code and everything works.

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

Not sure, but maybe you just need to remove first <template> tag inside div#app because its not neccessary