zoukankan      html  css  js  c++  java
  • 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>
    View Code

     官网说明,在文档的最下面

     其他: 

    01) ant-design-vue 在单页面中使用,不在全局使用

    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'
    import 'ant-design-vue/dist/antd.css'
  • 相关阅读:
    1026 Table Tennis (30)
    1029 Median
    1025 PAT Ranking (25)
    1017 Queueing at Bank (25)
    1014 Waiting in Line (30)
    1057 Stack (30)
    1010 Radix (25)
    1008 Elevator (20)
    字母大小写转换
    Nmap的基础知识
  • 原文地址:https://www.cnblogs.com/dafei4/p/13020211.html
Copyright © 2011-2022 走看看