Vue.js3+Vite项目使用VueGoodTable添加单元格显示为空怎么解决

• 核心原因是你参考的是Vue2版本的VueGoodTable用法，而当前项目中安装的是适配Vue3的vue-good-table-next，两者自定义列的插槽语法不兼容，Vue2版本的slot="table-column"写法在Vue3环境下不会生效。
• 新增字段未做响应式处理：如果是动态给行数据添加新字段，未按照Vue3响应式规则更新数据，会导致视图无法读取到新增字段值。
• 列配置与数据字段不匹配：列配置中的field属性与行数据中的新增字段名拼写、大小写不一致，也会导致单元格无内容渲染。

1. 确认依赖安装正确
   确保你安装的是适配Vue3的版本，执行安装命令：
   npm install vue-good-table-next
   不要安装适配Vue2的vue-good-table包。

2. 调整自定义列插槽写法
   将原Vue2版本的插槽写法替换为Vue3支持的v-slot写法，示例完整代码如下：

<template>
  <vue-good-table
    :columns="columns"
    :rows="rows"
  >
    <!-- 自定义单元格插槽，使用Vue3的#简写语法 -->
    <template #table-cell="props">
      <!-- 匹配新增的自定义列，slug对应列配置里的唯一标识 -->
      <div v-if="props.column.slug === 'custom-column'">
        {{ props.row.customField }}
      </div>
      <!-- 其他列走默认渲染逻辑 -->
      <div v-else>
        {{ props.formattedRow[props.column.field] }}
      </div>
    </template>
  </vue-good-table>
</template>

<script>
import { VueGoodTable } from 'vue-good-table-next';
import { ref } from 'vue';

export default {
  components: {
    VueGoodTable
  },
  setup() {
    // 列配置
    const columns = ref([
      {
        label: '原有列',
        field: 'originField'
      },
      {
        label: '新增自定义列',
        field: 'customField', // 需和行数据里的新增字段名完全一致
        slug: 'custom-column' // 插槽中用来匹配列的唯一标识
      }
    ]);

    // 行数据：初始化时直接声明新增字段，避免响应式问题
    const rows = ref([
      { originField: '测试值1', customField: '新增值1' },
      { originField: '测试值2', customField: '新增值2' }
    ]);

    // 若为接口动态获取数据，处理示例：
    // fetchApi().then(res => {
    //   // 直接通过map生成包含新增字段的完整数组，再赋值给rows.value，保证响应式生效
    //   rows.value = res.data.map(item => ({
    //     ...item,
    //     customField: item.otherField // 这里自定义新增字段的赋值逻辑
    //   }))
    // })

    return {
      columns,
      rows
    }
  }
}
</script>

3. 校验字段匹配
   确认列配置中的field属性值与行数据中的新增字段名拼写、大小写完全一致，打开浏览器控制台排查是否有相关报错。

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