shayloyuki

科技是第一生产力

 

vxe-column 表头顺序:数据中改变后,但视图位置不更新

问题

在左树右表的页面中,左侧点击不同的节点,右侧表头会改变。但在某些情况下,数据中表头顺序改变了,但视图中表头位置却没变。如下图所示:

image
image

尝试

数据变了但视图未更新,猜测是vue更新机制导致的,于是把表头数组的赋值改为 $set,无效;

猜测是右侧表格组件复用导致数据未更新,(但其实 vue-dev-tool 中能看到 数据已经更新了),于是把表格组件加上 key 值,无效;

解决

怀疑是表头渲染的原因,查找资料发现,是因为 v-for 循环表头数组时,key 值设为了表头属性的字段,但切换左侧树节点后,表头属性的字段没变。因此,视图更新不生效。修改前后代码对比如下:

image

总结

vnode 视图更新机制:对比元素的 key 值,若有改变则更新,否则保留。

因此,以上的更新过程是:更新前,第一个表头的 key 值为 quancheng,在更新后的表头数组中寻找 key 值为 quancheng的元素,若能找到,则第一个表头的视图位置不更新,反之更新。

posted on 2024-01-17 14:37  shayloyuki  阅读(365)  评论(0编辑  收藏  举报

导航