元素 table VueJS 中的重复键

Question

我有以下代码：

      <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>

Answer 1

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

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

元素 table VueJS 中的重复键

Duplicate key in Element table VueJS

html

vue.js

vuejs2

element-ui