Naive UI 的 DataTable 如何动态更新表格数据？

这问题我见过好几次了，不是 Naive UI 的锅，是你 ref 包装的数组直接整个替换导致响应式链断了。

ref([]) 创建的是一个响应式的 Ref 对象，它的 .value 是你真正的数组。当你写 tableData.value = res.data 时，你其实是替换了整个引用，而 DataTable 组件可能内部并没有监听这个 ref 的 .value 变化（尤其是某些版本的 n-data-table 对 ref 包装的 data 支持有 bug）。

稳妥做法是：保持同一个数组引用，只清空再填充，或者用 reactive。

推荐用 reactive，写法干净点：

import { reactive, onMounted } from 'vue'



const tableData = reactive([])



onMounted(() => {

  fetchData().then(res => {

    tableData.length = 0

    tableData.push(...res.data)

  })

})

或者如果你坚持用 ref，那就别整个替换，改用 value.splice + value.push，或者 value.value = [...res.data] 也行，但得确保 DataTable 是响应式读取 :data="tableData" 而不是 :data="tableData.value" —— 你模板里写的是 :data="tableData"，那 Vue 就会自动解包 ref，但某些旧版 Naive UI 在内部处理时可能没处理好 ref 的解包，所以还是用 reactive([]) 最省心。

另外确认下 columns 是不是也用 reactive 或 ref 包起来了，列配置变了也可能导致表格不刷新。

顺带说一句，WP 里我们也有类似坑，比如 wp_localize_script 后 JS 拿到的数据要是静态对象，改了也不触发，得自己手动 dispatch 或 trigger 事件……不过这是后话了。

你这个问题其实踩了个挺常见的坑，不是 Naive UI 的 DataTable 有问题，而是 Vue 的响应式机制里有个细节容易被忽略。

原理是这样：当你用 ref([]) 包装一个数组时，Vue 只会监听这个 ref 变量本身的引用变化，不会自动深度监听数组内部元素的变化。但更关键的是——Naive UI 的 DataTable 在内部是通过 Object.is 比较 data 属性的新旧值来决定要不要重新渲染的。

也就是说，如果你只是在异步回调里写：

tableData.value = res.data

这行代码本身是没问题的，Vue 会检测到 tableData 这个 ref 的值变了，应该触发更新才对。但问题往往出在：你赋值的 res.data 和之前 tableData.value 指向的是同一个数组引用（比如接口返回的就是同一个数组实例，或者你做了缓存、直接修改了原数组），那 Vue 的响应式系统就会觉得「哦，这个 ref 还是那个 ref，没变」，于是不触发更新。

举个例子你就明白了：

const arr = []

const refArr = ref(arr)



// 1. 这样赋值不会触发响应式更新（因为引用没变）

refArr.value = arr  



// 2. 这样才会触发更新（引用变了）

refArr.value = [...arr]

// 或者

refArr.value = arr.slice()

// 或者

refArr.value = arr.concat()

所以你现在的写法如果接口返回的是同一个数组引用，或者你之前已经赋过值、现在又把同一个数组赋回去，就凉了。

✅ 正确做法有几种，我推荐你用最稳妥的：

方案一：每次赋值都创建一个新数组（最推荐）

fetchData().then(res => {

  // 确保每次都是新数组引用

  tableData.value = [...res.data]

  // 或者 tableData.value = Array.from(res.data)

})

这样 Vue 发现 tableData.value 的引用变了，就会通知 DataTable 重新渲染，Naive UI 内部也会检测到数据变了，表格就更新了。

方案二：如果你是在原数组上操作（比如 push、splice），记得用 ref 包装后操作 .value

比如你这样写是对的：

const tableData = ref([])



fetchData().then(res => {

  tableData.value.push(...res.data) // ✅ 这样也能触发更新

})

⚠️ 但注意：不能直接操作原数组再赋值！比如：

// ❌ 错误示范（引用没变）

const temp = tableData.value

temp.push(...res.data)

tableData.value = temp  // 还是同一个数组引用，不触发更新！

方案三：如果你的数据结构比较复杂，还涉及对象嵌套，记得用 reactive 包装外层对象，但 data 属性本身还是用 ref

不过对 DataTable 来说，data 属性就传一个数组就行，不需要套 reactive，除非你整个 tableData 是个大对象的一部分：

const state = reactive({

  tableData: []

})



// 后面更新要写成

state.tableData = [...res.data]

但你这个场景直接用 ref([]) 就够了，别整复杂了。



顺带提一嘴，我见过有人用 nextTick 强制刷新，其实没必要：

// ❌ 多此一举（除非你有其他副作用逻辑）

await nextTick()

tableData.value = [...res.data]

只要引用变了，Vue 会自动更新，不需要手动等 nextTick。



最后给你一个完整可运行的最小示例，直接复制就能跑：

<template>

  <n-space vertical>

    <n-button @click="fetchData">刷新数据</n-button>

    <n-data-table :columns="columns" :data="tableData" />

  </n-space>

</template>



<script setup>

import { ref, h } from 'vue'

import { useMessage } from 'naive-ui'



const message = useMessage()

const tableData = ref([])



const columns = [

  { title: 'ID', key: 'id' },

  { title: 'Name', key: 'name' }

]



// 模拟异步接口

function fetchData() {

  // 每次都生成新数组，避免引用复用问题

  const newData = [

    { id: 1, name: 'Alice' },

    { id: 2, name: 'Bob' }

  ]



  // 模拟网络延迟

  setTimeout(() => {

    // ✅ 正确：创建新数组引用

    tableData.value = [...newData]

    

    // 如果你想验证：直接改原数组再赋值就无效了

    // newData.push({ id: 999, name: 'Ghost' })

    // tableData.value = newData  // ← 这样就不更新！

  }, 500)

}

</script>

你本地试试，把 [...newData] 换成 newData 就能复现你遇到的问题，改回新数组引用就 OK。

如果还不行，大概率是接口返回的数据结构有问题（比如后端返回的是字符串 JSON，你没 JSON.parse），或者你模板里写的 :data="tableData" 其实绑定错了变量名——但根据你贴的代码，核心问题就是引用没变，按上面改就稳了。