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

问题

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

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()
         })
     }
   },
 },
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值