elementui getrowkey

获取行数据的唯一标识键（getRowKey）

在 Element UI 的表格组件（el-table）中，getRowKey 是一个用于指定行数据唯一标识的属性。默认情况下，表格会使用行数据的 key 字段作为唯一标识。如果数据中没有 key 字段，或者需要自定义唯一标识，可以使用 getRowKey 来指定。

基本用法

getRowKey 可以是一个函数，返回行数据的唯一标识值。例如：

<template>
  <el-table
    :data="tableData"
    :get-row-key="getRowKey"
    row-key="id"
  >
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    };
  },
  methods: {
    getRowKey(row) {
      return row.id; // 返回行数据的 id 作为唯一标识
    }
  }
};
</script>

结合 row-key 使用

row-key 是 el-table 的另一个属性，可以直接指定数据中的某个字段作为唯一标识，例如：

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

如果 row-key 和 getRowKey 同时存在，getRowKey 的优先级更高。

动态计算行键

如果行数据的唯一标识需要动态计算，可以使用 getRowKey 函数返回计算后的值：

methods: {
  getRowKey(row) {
    return `${row.name}-${row.age}`; // 组合姓名和年龄作为唯一标识
  }
}

注意事项

• 确保 getRowKey 返回的值是唯一的，否则可能导致表格渲染异常。
• 如果数据是动态加载的，确保每次返回的 key 不会重复。
• 在树形表格（tree-props）中，getRowKey 同样适用，用于标识节点的唯一性。

通过合理使用 getRowKey，可以确保表格行数据的唯一性和正确渲染。