vue3+ant-design3 table 列自定义控制，数据改变但页面没发生变化

Question

使用环境

vue3+ant-design3+ts

功能

自定义控制列
<a-table :columns="columns" :data-source="dataSource"></a-table>

自定义修改colunms后，实际列没有渲染，比如删掉一个从长度为7的数组变成6，数据会变化，但table上的列没变少

更新：找到原因了，columns使用了reactive，修改时直接columns = columns.filter(()=>{}), 这是返回一个新数组，所以失效了，改为ref，使用ref.value = columns.filter(()=>{})

总结：就是低级错误

Answer 1

在设置columns的地方写 JSON.parse(JSON.stringify(columns))