element el-cascader 选中但不显示的问题

问题

遇到这么一个令我抓狂的问题,element的级联选择器数据回显的问题,我这个是异步加载的,编辑完这一步的内容可以点击下一步继续操作,也可以点击上一步回到这里,这时候就需要回显数据了。坑的是这里选中了但不显示。就像下面那样:
element el-cascader 选中但不显示的问题_第1张图片
昨天搞了一晚,翻遍网上的资料,都没有找到解决的方法。有说赋值的方法不对,不要用push,也有说是用v-if或者key重新初始化,但都无法解决我的问题,因为我这里返回上一步用的就是v-if,也就是会重新初始化,而且这都已经选中了,也就是说我的赋值是没有问题的。
直到今天早上,实在没办法就去翻了下源码,看到了这段代码:
element el-cascader 选中但不显示的问题_第2张图片
我尝试调用一下这个函数:

self.$refs.cascader.computePresentText()

没想到的是,我的问题就这样解决了。
完整代码如下:

<el-cascader
  v-model="formData.goodsCategory"
  :options="options"
  :props="props"
  ref="cascader"
  clearable
>el-cascader>
// 重新赋值
watch: {
 twoData(val) {
    this.formData = val
  },
},


props: {
   lazy: true,
   label: 'name',
   value: 'id',
   expandTrigger: 'hover',
   lazyLoad(node, resolve) {
     if (node.level === 0) {
       getCategoryTree().then((res) => {
         if (res.code == 200) {
           resolve(res.data)
         }
       })
     } else {
       getCategoryChild(node.value)
         .then((res) => {
           if (res.code == 200) {
             resolve(res.data)
           }
         })
         .finally(() => {
           self.$refs.cascader.computePresentText()
         })
     }
   },
 },

你可能感兴趣的:(element,elementui)