使用el-table / vxe-table 动态渲染表头的时候,我们更改表头数据 如让表头重新排序。但是会发现数据已经修成功但是表格ui视图却没有发生变化。
原因在于表头(表格列)是使用 v-for进行动态渲染的,我们给每一项都绑定了key。 当我们更改了表头数组中数据对象的顺序,vue会通过当时绑定的key找到对应元素,vue发现二者并无差异于是并没有重新渲染。
解决方法
<vxe-column
v-for="(item,index) in FilteredTableColumn"
:key="index" />
我们用index作为key就可以完美解决这个问题,用index作为key,vue会“按顺序”逐一对表头元素进行比对,因为我们顺序是改变了,所以vue发现二者匹配不上 重新渲染界面。
(抛砖引玉 详细可查询vue的diff算法)
除此之外还有另一种解决办法就是给表格dom绑定上key,我们更改key的值时,表格的dom就会重新渲染,这样手动的让他去更新也是可行的