Bootstrap

记录一次 element-ui Cascader 级联选择器报错问题

报错信息

在这里插入图片描述

问题总结

调试了源码找到真正的问题,watch队列中,options的监听事件比 value的监听事件快,watch的队列表示为[“options”, “value”],当修改级联的value为" "并修改options为[ ],此时监听事件的执行顺序为,先执行options的监听事件,后执行value的监听事件。

解决方案

  1. 思路:想办法重置activePath
  2. 让Cascader组件重新渲染(不推荐组件重新渲染,消耗性能)
  		key 方式 
  		v-if 方式
  1. 让activePath重置(推荐)
  ref拿到Cascader组件
    this.$refs.cascaderRef.panel.activePath = []
    this.$refs.cascaderRef.handleClear()

完整代码

  watch: {
    // 解决联级选择器报错问题:监听级联选择器v-model绑定的值,监听的时候执行下面的两行代码就解决了报错。
    "formData.productType": {
      handler(newVal) {
        this.$refs.cascaderRef.panel.activePath = [];
        this.$refs.cascaderRef.handleClear();
      },
      deep: true,
    },
  },
;