Vue-good-table填充数据后清空rows数组无法显示emptystate问题

我之前也踩过vue-good-table的这个坑，刚好能给你几个靠谱的解决方案：

1. 先确认数组的响应式更新是否正确 #

Vue对数组的响应式处理有一些细节，直接修改原数组的操作（比如rows.length = 0）可能不会触发组件更新。正确的做法是重新赋值一个全新的空数组：

// 错误操作：不会触发响应式更新
this.rows.length = 0;

// 正确操作：重新赋值新数组，确保Vue能检测到变化
this.rows = [];

如果你的代码已经这么写了，那大概率是组件内部的判断逻辑问题，试试下面的方案。

2. 给组件加key强制重新渲染 #

这是最稳妥的解决方案，通过给vue-good-table绑定一个key属性，当清空数据时修改key值，让Vue销毁旧组件实例并创建新的，这样就能正确识别空数组并显示空状态了：

<template>
  <div>
    <vue-good-table 
      :columns="columns" 
      :rows="rows"
      :key="tableRenderKey" <!-- 新增key属性 -->
      <!-- 你的其他配置 -->
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [], // 你的列配置
      rows: [],
      tableRenderKey: 0 // 初始化渲染key
    };
  },
  methods: {
    clearTableData() {
      this.rows = [];
      this.tableRenderKey += 1; // 修改key，触发组件重新渲染
    }
  }
};
</script>

3. 检查空状态的启用配置 #

有时候可能是你不小心关闭了空状态的显示，确保组件的empty-state-enabled属性设置为true（默认是true，但保险起见可以显式声明）：

<vue-good-table 
  :columns="columns" 
  :rows="rows"
  :empty-state-enabled="true"
  empty-state-text="暂无数据" <!-- 自定义空状态文本（可选） -->
/>

4. 强制组件实例更新 #

如果上面的方法都没效果，可以通过$forceUpdate()强制组件更新，记得给组件加ref：

<vue-good-table ref="goodTable" :columns="columns" :rows="rows" />

然后在清空数据后调用：

clearTableData() {
  this.rows = [];
  this.$nextTick(() => {
    this.$refs.goodTable.$forceUpdate();
  });
}

我自己测试下来，方案2的key方法几乎能解决所有这类渲染不更新的问题，你可以优先试试这个。

内容的提问来源于stack exchange，提问作者EmacsVI