使用@tanstack/vue-table(Vue3)遇'id列不存在'错误的解决咨询

这个错误是因为TanStack Table 默认会将id字段作为行的唯一标识（rowId），当你的数据包含id字段但未在列配置中定义时，就会触发该提示。下面提供两种无需展示id列的修复方式：

方案1：自定义行ID获取器 #

如果你的数据中有其他唯一标识字段（比如uuid、userId等），可以直接指定该字段作为行ID，避免框架默认查找id列：

const table = useVueTable({
  columns,
  data,
  // 替换成你数据里的唯一字段
  rowIdAccessor: row => row.uuid,
});

方案2：添加隐藏的id列 #

如果必须用id作为行标识但不想展示该列，可以在列配置中添加一个隐藏的id列：

const columnHelper = createColumnHelper<any>();
const columns = [
  columnHelper.accessor('id', {
    header: '',
    hidden: true, // 标记列隐藏，不会在表格中渲染
  }),
  columnHelper.accessor('name', {
    header: 'Name'
  }),
];

如果需要保留列的可隐藏配置（后续可通过控制显示），也可以改用initialVisibility和enableHiding：

columnHelper.accessor('id', {
  header: 'ID',
  enableHiding: true,
  initialVisibility: false, // 默认隐藏
}),

内容的提问来源于stack exchange，提问作者Владислав Кураев