二次封装el-table Duplicate keys detected: 'expanded-row__undefined'. This may cause an update error. found in

### 解决方案

当在二次封装 `el-table` 组件时遇到 `Duplicate keys detected: 'expanded-row__undefined'` 的更新错误问题，这通常是因为表格中的每一行缺少唯一的键值。为了确保每行数据具有唯一标识符，可以采取以下措施：

#### 1. 确保 Row Key 唯一性
设置 `row-key` 属性来指定用于作为行唯一标识的字段名。如果未提供此属性，默认情况下会尝试使用索引作为 key，但这可能导致重复。

<template>
  <el-table :data="tableData" row-key="id">
    <!-- 表格列定义 -->
  </el-table>
</template>

<script setup>
const tableData = [
  { id: 1, name: "Alice", age: 24 },
  { id: 2, name: "Bob", age: 30 }
];
</script>

#### 2. 自定义 Expanded Row Render Function
对于展开行功能，应该为每个扩展区域分配一个唯一的 key。可以通过自定义渲染函数实现这一点，并传递当前行的数据项给子组件以便生成不同的 key[^1]。

// 定义 expandRowKeys 或者 expandedRows 数组存储已展开状态下的行 ID 列表
this.$refs.table.toggleRowExpansion(row); // 控制某一行是否被展开的方法

#### 3. 防止 Undefined Keys 出现
检查并确认所有数据源对象都含有预期用来做 key 的属性（如上例中的 `id` 字段），并且这些值不为空或 undefined。如果有任何记录缺失该字段，则需补充完整后再传入到表格组件中显示。

通过上述方法能够有效避免由于 key 不唯一而导致的各种异常情况发生，在开发过程中也应时刻注意保持良好的编码习惯以减少此类问题的发生几率。