Ant Design of Vue 之 rowKey 問題

Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.]

 

warning.js?2149:7 Warning: [antdv: Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key,

 

解決辦法:  [  :rowKey ]  

帶:的表示綁定的是表達式
帶冒號的表示綁定的是表達式
不帶的表示綁定的就是值

        <a-table
                :columns="columns"
                :data-source="tableData"
                size="middle"
                :rowKey='record=>record.id'> <!--id為 tableData 中的一個屬性-->
        </a-table>
        <a-table
                :columns="columns"
                :data-source="tableData"
                size="middle"
                :rowKey="(record,index)=>{return index}"> <!--record 為每一條數據, index 索引-->
        </a-table>
        <a-table
                :columns="columns"
                :data-source="tableData"
                size="middle"
                rowKey="id"> <!--id為 tableData 中的一個屬性 !!! 這里的rowKey不需要冒號 -->
        </a-table>

 

<script>
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '價格',
            dataIndex: 'price',
        },
        {
            title: '刪除次數',
            dataIndex: 'num_add',
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '日期',
            dataIndex: 'time_aaa',
        },
    ];

    export default {
        data() {
            return {
                tableData: [
                    {
                        id:1,
                        name: '史記',
                        price: '¥50',
                        author: 'dafei',
                        num_add: '0',
                        date: '2016-05-02',
                        detail: 'detail'
                    }, {
                        id:2,
                        name: '漢書',
                        price: '¥100',
                        author: 'dafei',
                        num_add: '0',
                        date: '2016-05-02',
                        detail: 'detail'
                    }],
                columns,
            };
        },
    };
</script>

 

 

 官網說明,在文檔的最下面

 

 其他: 

01) ant-design-vue 在單頁面中使用,不在全局使用

import Vue from 'vue'
import Antd, { message,Select } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'