Naive UI 的表格怎么实现动态列显示？

Zz蒙蒙提问于 2026-03-04 21:04:20 阅读 6

框架

我用 Naive UI 的 n-data-table 组件，想根据用户选择动态显示或隐藏某些列，但改了 columns 数组后表格没反应，是哪里不对？

试过用 computed 重新生成 columns，也试过直接 splice 原数组，都不行。比如下面这样：

const visibleColumns = ref(['name', 'age']);
const filteredColumns = computed(() => {
  return originalColumns.filter(col => visibleColumns.value.includes(col.key));
});

然后把 filteredColumns 传给 n-data-table 的 columns 属性，但表格还是显示全部列，根本没变。

我来解答赞 1 收藏

反馈

1 条解答

瑞雪 ☘︎ Lv1

Naive UI的数据表格动态列显示确实有点坑，我之前也被这问题折腾过。主要问题出在Vue的响应式处理上。

你那个computed的思路是对的，但可能漏了关键点。Naive UI的n-data-table对columns数组的变更比较敏感，需要确保整个数组引用变化才能触发更新。试试这样改：

const visibleColumns = ref(['name', 'age']);

const filteredColumns = computed(() => {

  return [...originalColumns.filter(col => visibleColumns.value.includes(col.key))];

});

重点是这个[...]展开操作符，它确保每次计算都返回全新的数组引用。如果还不行，可以暴力点用JSON.parse(JSON.stringify())深拷贝一下。

另外检查下你的originalColumns定义是否正确，每列的key要和visibleColumns里的字符串完全匹配。有时候大小写或者拼写不一致也会导致过滤失效。

遇到过最坑的情况是原始columns在某个mounted钩子里异步加载的，导致computed第一次计算时originalColumns还是空数组。这种时候要加个v-if确保数据准备好了再渲染表格。

2026-03-05 11:10