Cascader 级联选择器使用踩坑记

文章目录

1. 报错: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null"

  • 原因: 使用Cascader 级联选择器动态获取数据时如果已经有选中的值,切换数据源之后如果切换后的数据源没有之前选中的值就会报错
  • 解决方案:
    给cascader设置一个key,监控数据源的改变,当数据源变更时也改变key值,key值改变了,cascader就会重新渲染
	ref="originTemplatePath"
	:key="originTemplatePathCascaderKey"
	:options="originTemplatePathOptions"
	:props="{ checkStrictly: true }"
	clearable
	filterable
/>
  watch:{
    originChoiceTemplate(val) {
      // 当数据源改变将当前选中的数据清空
      this.$refs.originTemplatePath.$refs.panel.clearCheckedNodes()
      if (val) {
        // 对key值加1,重新渲染cascader
        ++this.originTemplatePathCascaderKey
        this.showTemplateTreeWithTemplateName(val)
      }
    }
  }

2. 如何清空cascader中已经选中的数据,官方没有提供清空的方法:

  • 解决方案:
    给cascarde一个ref=“originTemplatePath”(按照你的前后文自定义),然后调用this.$refs.originTemplatePath.$refs.panel.clearCheckedNodes()清空
上一篇:vue 父子传值


下一篇:vue中$refs、$emit、$on的使用场景