Ant-Design-vue框架组件注意点

Table表格自定义rowKey

没有rowKey的Table表格例子：

VUE组件

这是一个没有设置rowKey的属性的组件

// template 
<a-table
	:columns="columns"
	:data-source="tenantData"
	bordered>
	<!-- 状态自定义 -->
	<template slot="tag" slot-scope="row">
		<a-tag color="blue" v-if="row.state === '1'"> 正常 </a-tag>
		<a-tag color="red" v-else> 冻结 </a-tag>
	</template>
	<!-- 操作自定义 -->
	<template slot="operation" slot-scope="row">
		<a-space size="small">
			<a @click.prevent="editHandle(row)">编辑</a>
			<a-divider type="vertical" />
			<!-- 更多 -->
			<a-dropdown>
				<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                    更多<a-icon type="down" /></a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;" @click="tenantDetails(row)">详情</a>
						</a-menu-item>
						<a-menu-item>
							<a-popconfirm
								title="确定要删掉吗？"
								ok-text="确定"
								cancel-text="取消"
								@confirm="() => removeConfirm(row)">
								<a>删除</a>
							</a-popconfirm>
						</a-menu-item>
					</a-menu>
			</a-dropdown>
		</a-space>
	</template>
 </a-table>


<script>
    // 表头
    const columns = [
	{
		title: "租户名称",
		dataIndex: "name",
		key: "name",
		align: "center",
	},
	{
		title: "租户编号",
		dataIndex: "number",
		key: "number",
		align: "center",
	},
	{
		title: "开始时间",
		dataIndex: "startTimer",
		key: "startTimer",
		align: "center",
	},
	{
		title: "结束时间",
		dataIndex: "endTrmer",
		key: "endTrmer",
		align: "center",
	},
	{
		align: "center",
		title: "状态",
		scopedSlots: { customRender: "tag" },
	},
	// 自定义模板
	{
		align: "center",
		title: "操作",
		scopedSlots: { customRender: "operation" },
	},
]
    // 数据
    let tenantLists = [
	{
		id: "1",
		name: "女警",
		tenantNo: "1100",
		startTimer: "2020-06-01 10:10:40",
		endTimer: "2021-06-01 10:10:40",
		state: "1",
	},
	{
		id: "2",
		name: "青钢影",
		tenantNo: "1200",
		startTimer: "2020-06-01 10:10:40",
		endTimer: "2021-06-01 10:10:40",
		state: "1",
	},
	{
		id: "3",
		name: "卡莎",
		tenantNo: "1300",
		startTimer: "2020-06-01 10:10:40",
		endTimer: "2021-06-01 10:10:40",
		state: "0",
	}]
    export default {
        data(){
            return:{
                tenantLists,
                columns,
            }
        }
    }
</script>

浏览器则会出现以下报错：

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, 

解决方案：要在a-table中添加rowKey属性，最好设置数据里的id，因为你key要唯一性。

<a-table
	:columns="columns"
	:data-source="tenantData"
    rowKey="id"
	bordered>
	<!-- 状态自定义 -->
	<template slot="tag" slot-scope="row">
		<a-tag color="blue" v-if="row.state === '1'"> 正常 </a-tag>
		<a-tag color="red" v-else> 冻结 </a-tag>
	</template>
	<!-- 操作自定义 -->
	<template slot="operation" slot-scope="row">
		<a-space size="small">
			<a @click.prevent="editHandle(row)">编辑</a>
			<a-divider type="vertical" />
			<!-- 更多 -->
			<a-dropdown>
				<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                    更多<a-icon type="down" /></a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;" @click="tenantDetails(row)">详情</a>
						</a-menu-item>
						<a-menu-item>
							<a-popconfirm
								title="确定要删掉吗？"
								ok-text="确定"
								cancel-text="取消"
								@confirm="() => removeConfirm(row)">
								<a>删除</a>
							</a-popconfirm>
						</a-menu-item>
					</a-menu>
			</a-dropdown>
		</a-space>
	</template>
</a-table>

PS：这里是提供刚入门的小白看的，因为看文档实在太头痛了！！！