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'