el-tree控件动态获取数据赋值给treeData渲染问题:render-after-e。。。问题描述:
1、treeData中的两个children分别对应的页⾯渲染效果,区别是第⼀个children是treeData的⼆级属性,第⼆个children是treeData的三级属性。
2、当异步请求接⼝获取值的时候,⼆级属性成功赋值,三级属性赋值之后页⾯不显⽰:
⼆级children正常显⽰:
三级children没有显⽰:
但是此时打印Data[2].children[0].children确实是获取过来的接⼝数据,那是什么原因?
解决:
第⼀种⽅法:官⽹中给出的⽅法,设置:render-after-expand='false'就可以了。是否在第⼀次展开某个树节点后才渲染其⼦节点的意思是如果我第⼀次渲染默认是未展开的话,那你就不给我渲染了?
那有的⼈可能没有注意到render-after-expand这个属性,误打误撞写了default-expand-all这个属性,那
也正好是展开状态,所以就可以正常渲染了,或者是:default-expanded-keys="[0, 1, 2, 3]"也可能碰巧遇不到这个bug。还有的⼈是点击⼆级children之后搞⼀个懒加载的圈圈在那转,然后它不就打开到三级children了嘛,获取到数据后再渲染出来,我们公司的⼈之前就是这么做的,估计他当时没有到这个原因哈哈哈,我特么还想着这个直接渲染不就⾏了,⼲嘛这么⿇烦啊,原来如此。但是我想说,elementUI官⽅不能直接让render-after-expand默认为false嘛,踩这个坑好冤枉。。
第⼆种⽅法:思路是将整个treeData都复制下来,如果层级⽐较深可以⽤JSON.parse(JSON.stringify()),对新数组进⾏修改,再赋值给treeData。这种做法的前提是⼆级children已经可以获取接⼝的值进⾏渲染了,那么重新赋值treeData肯定也是没问题的,但是这个并没有到这个问题的根本原因啊,不过这是⼀个骚操作,以后说不定会遇到其他不到原因的bug,正好可以先解决着,能跑了再说优化的事
怎么给数组赋值 第三种⽅法:这种⽅法也是建⽴在⼆级children能够正确渲染的前提下,⼿动给三级children加了⼀个对象属性
注意:
写在data中的数据在组件创建的时候就已经加了数据劫持了,它就是响应式的,这⾥遇到的问题是:数据已经赋值到treeData上了,也可以正常打印出来,但是页⾯就是没有渲染。
⼀开始以为是数据没有响应,⽤this.$set()捣⿎了半天,浪费了不少时间,下次遇到很奇怪的bug的时候⼀定要多看官⽅⽂档!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论