Cascader 级联选择器使用踩坑记

文章目录

• • • 1. 报错: `Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null"`
    • 2. 如何清空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()清空

标签：坑记,数据源,refs,cascader,originTemplatePath,key,清空,Cascader,选择器
来源： https://blog.csdn.net/study_in/article/details/120458680