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'
  • 相关阅读:
    echarts 柱状图
    echarts 双y轴渐变色进度条
    echarts 折线图
    算法系列一:本质以及特征
    导致薪水低的九大行为表现
    Tomcat使用shutdown.sh无法关闭
    定时将上月的数据导入到Oracle中,并更新指定的列
    定时抛转数据 crontab
    微服务主要模块
    tk.mybatis 调用oracle,生成ID
  • 原文地址:https://www.cnblogs.com/dafei4/p/13020211.html
Copyright © 2011-2022 走看看