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

Question

使用一下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>

Answer 1

你的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"

Answer 2

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