元素表VueJS中的重复键答案

【问题标题】：Duplicate key in Element table VueJS元素表VueJS中的重复键
【发布时间】：2022-01-13 11:35:50
【问题描述】：

我有以下代码：

      <el-table
        :data="getFormattedLocationTableData"
        style="width: 100%"
        :fit="true"
        rowKey="treeId"
      >
        <el-table-column
          prop="customerName"
          label="Клиент"
          width="400px"
        >
          <template slot-scope="scope">
            <img
              v-if="showDropdownArrow(scope.row.type)"
              :src="require(`@Svg/${scope.row.type}.svg`)"
              :alt="scope.row.type"
              class="icon"
            />
            <span class="item">
              {{ getRowName(scope.row) }}
            </span>
          </template>
        </el-table-column>
    </el-table>

当我尝试运行它时，我收到以下错误。请问您能帮忙吗？

 [Vue warn]: Duplicate keys detected: '1411'. This may cause an update
 error.
 
 found in
 
 ---> <ElTableBody>
        <ElTable> at packages/table/src/table.vue
          <LocationsTable> at src/components/tables/LocationsTable.vue
            <ControlLocationsPage> at src/pages/Control/ControlLocationsPage.vue
              <Layout> at src/layouts/layout.vue
                <Nuxt>
                  <DefaultLayout> at src/layouts/default.vue
                    <Root>

【问题讨论】：

标签： html vue.js vuejs2 element-ui

【解决方案1】：

循环中不同元素的相同键导致此警告。您可以对不同的 v-for 循环使用不同的键来避免这种情况。在您的情况下，row-key="treeId" 正在获取“treeId”的重复值。确保将唯一值传递给行键。

`https://codepen.io/shwetas7/pen/PoJXZwN`

【讨论】：

感谢您的回答！请问，“重复值”是什么意思？你的意思是说我的treeId，例如，在同一个数组中有相同的值吗？
@MikeS。是的 treeId 是主要的 ids 。它们应该是不同的。同样的规则也适用于 v-for。 key props 应该是 Array 中每个项目的唯一值。
非常感谢，希望对您有所帮助。