el-table.rowKey,数据为空时,遇到的问题

Question

使用element-plus的el-table，设置:row-key="row=>row.id",当表格数据为空时，有bug。

报错如下：

哪位同学遇到吗？如何解决的？求方法！

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你的问题是在使用 Element Plus 的 <el-table> 组件时，当数据为空时遇到了问题。你设置了 :row-key="row => row.id"，当数据为空时，尝试访问 row.id 会导致错误，因为 row 是 null 或 undefined。这就是为什么你看到了 “Cannot read properties of null (reading 'forEach')” 的错误。这是因为内部代码尝试在 null 或 undefined 上调用 forEach 方法。

为了解决这个问题，你可以在设置 row key 之前检查数据是否存在。你可以使用一个计算属性或者方法来实现这个逻辑。下面是一个简单的例子：

<template>
  <el-table ref="multipleTableRef" :data="commodityPageList" :row-key="getRowKey">
    <!-- 其他代码 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      commodityPageList: [], // 你的数据列表
    };
  },
  methods: {
    getRowKey(row) {
      return row && row.id || ''; // 如果 row 不存在或者 row.id 不存在，则返回空字符串
    },
  },
  // 其他代码
};
</script>

在这个例子中，我们创建了一个 getRowKey 方法来返回行键。这个方法首先检查 row 是否存在以及 row.id 是否存在，如果不存在，就返回空字符串。这样，即使数据为空，也不会尝试访问不存在的属性，从而避免了错误。