vue框架下 element 动态加载级联选择器主动清空内容

做公司项目的时候需要用到级联选择器，获取数据后发现无法主动清空内容，主要尝试了网上几种方法，如主动触发clearable、还有什么鬼暴力清空方法和以下方法，均以失败告终。

let obj = {}
obj.stopPropagation = () => {}
try{
    this.$refs.cascader.clearValue(obj)
}catch(err){
    this.$refs.cascader.handleClear(obj)
}

后来在公司大佬的帮助下（小声点说，其实方法思路是他写的，我后面改进了一点）终于成功了。因为需要查询后台获取数据，所以这里用element动态加载级联选择器组件简单复现一下，这种没有真实数据渲染的并不能完美清空，不过思路已经贴出。代码如下：

<template>
  <div>
    <el-cascader
      v-model="cascaderValue"
      :props="props"
      :options="options_cascader"
      @change="handleChange"
      clearable="true"
      :key="isResouceShow"
    ></el-cascader>
    <el-row>
      <el-button v-on:click="btn" type="button">默认按钮</el-button>
    </el-row>
  </div>
</template>

<script>
let id = 0;
export default {
  data() {
    return {
      cascaderValue: "",
      isResouceShow: "0",
      options_cascader: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map(item => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 20);
        }
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    btn() {
      this.cascaderValue = ""; //清空v-model
      ++this.isResouceShow; //key值自增
      this.options_cascader = []; //清空内容
    }
    getData(data) {
      //  这里写获取数据的方法然后让options_cascader等于返回来的值
      // this.options_cascader=data
    }
  }
};
</script>

重点在这里，this.options_cascader = []，其实并没有想的那么难，就是让options等于一个空数组而已。
而让key值自增的原因是，这样可以避免第二次改变级联选择器node.level叶子的时候报错（也就是level 为null）。我是看了另一篇博客的解释是：改变榜单类型时也顺带着改变下key值，key值改变了，Cascader就能进行重新渲染了。

大概就这样了，还有记得让值初始化，如有什么错误均可指出。