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, Ant Design of Vue  之 rowKey 问题

 

解决办法:  [  :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>
Ant Design of Vue  之 rowKey 问题
<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>
View Code

 

Ant Design of Vue  之 rowKey 问题

 

 

上一篇:百度Echarts柱状图实现渐变色并且每条柱子不同色


下一篇:如何在 ant 的table中实现图片的渲染