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'