使用el-table报错Duplicate keys detected: '[object Object]'

• Z时代
• 2024-01-10
• 分类：技术分享

使用一下tableData数据类型就会报出上面的错误，请问怎么解决？

<template>
<el-table
:data="tableData"
style="width: 100%"
ref="multipleTable"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
border
highlight-current-row
id="table-key"
row-key="id"
default-expand-all
>
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<span>
{{scope.row['date']['value']}}
</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "studentObjList",
data() {
return {
tableData: [
{
"id": {
"type": "number",
"value": "1"
},
"date": {
"type": "text",
"value": "2016-05-02"
},
"name": {
"type": "text",
"value": "李小虎"
},
"address": {
"type": "input",
"value": "上海市普陀区金沙江路 1518 弄"
},
"IsAudit": {
"type": "select",
"value": "number",
"label": "数字输入框",
"options": [
{
"value": "input",
"label": "文本输入框"
},
{
"value": "number",
"label": "数字输入框"
},
{
"value": "date",
"label": "日期框"
}
]
},
"sex": {
"type": "number",
"value": 0
}
},
{
"id": {
"type": "number",
"value": "1"
},
"date": {
"type": "text",
"value": "2016-05-02"
},
"name": {
"type": "text",
"value": "李小虎"
},
"address": {
"type": "input",
"value": "上海市普陀区金沙江路 1518 弄"
},
"IsAudit": {
"type": "select",
"value": "number",
"label": "数字输入框",
"options": [
{
"value": "input",
"label": "文本输入框"
},
{
"value": "number",
"label": "数字输入框"
},
{
"value": "date",
"label": "日期框"
}
]
},
"sex": {
"type": "number",
"value": 0
}
}
]
}
},
methods: {
handleSelectionChange () {
}
}
}
</script>
<style scoped>
</style>

回答

你的row-key写的是'id'，然后解析的时候自然会找到tableData的子元素的id属性，但是这个id属性并不是字符串或者数字，而是一个对象，而对象转字符串就会被转化为"[object Object]"。但是key值是每行都是唯一的才可以，你这样子的话每行的key的相同了，就会报错。报错的翻译就是，有重复的名为"[object Object]"的key值
从文档知道，row-key可以传一个function，传入值为row，所以你这里的row-key要这么写
:row-key="(row)=>row.id.value"

element-ui官网文档显示
row-key支持多层访问，直接写id.value就可以。

以上是 使用el-table报错Duplicate keys detected: '[object Object]' 的全部内容， 来源链接： utcz.com/a/108215.html