问答

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

作者:admin 2021-05-06 我要评论

使用一下 tableData 数据类型就会报出上面的错误,请问怎么解决? template el-table :data="tableData" style="width: 100%" ref="multipleTable" tooltip-effe...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

image

<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就可以。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用el-table报错Duplicate keys detec

    使用el-table报错Duplicate keys detec

  • antd Select组件 mode='multiple' 点开

    antd Select组件 mode='multiple' 点开

  • 直接部署nginx和在docker里面部署nginx

    直接部署nginx和在docker里面部署nginx

  • 请教无限评论查询的写法

    请教无限评论查询的写法

腾讯云代理商
海外云服务器