如何在 `el-table` 中避免因空 `rowKey` 引起的渲染问题？

在Vue.js的Element UI库中，`el-table`组件用于展示数据表格，如果使用`row-key`属性来唯一标识每一行数据，遇到空值可能会导致渲染异常。为了避免这个问题，你可以采取以下几种策略：

1. **设置默认键值**：在数据源中，为可能出现空值的`rowKey`字段提供一个默认值。例如：

   const data = [
     { id: 1, name: 'Item 1', rowKey: '1' },
     { id: 2, name: '', rowKey: '' }, // 如果name为空，可以设为id或者其他稳定的值
     ... // 其他数据项
   ];

2. **使用计算属性处理**：在Vue模板中，通过计算属性检查`rowKey`是否为空，然后返回一个有效的键值：

   <el-table :data="tableData">
     <template slot-scope="scope">
       <span v-if="scope.row.rowKey">{{ scope.row.rowKey }}</span>
       <span v-else>{{ scope.$index + 1 }}</span> <!-- 或者其他自增序列 -->
     </template>
   </el-table>

   <script>
   export default {
     computed: {
       tableData() {
         return this.data.map(item => ({ ...item, rowKey: item.rowKey || item.id }));
       }
     }
   };
   </script>

3. **使用`v-if`或`v-show`过滤渲染**：仅当`rowKey`存在时才渲染对应行：

   <el-row v-for="(item, index) in filteredData" :key="item.rowKey || index">
     <!-- 表格内容 -->
   </el-row>
   
   <script>
   export default {
     computed: {
       filteredData() {
         return this.data.filter(item => item.rowKey);
       }
     }
   };
   </script>