element级联el-cascader懒加载关闭后重置选择状态

主要需要注意的点为

1.清空panel的node数据
2.重置cascader的key用来更新组件

  <div>
    <el-cascader ref="cascader" :key="key" :props="props" @visible-change="visibleChange" @change="handleChange" />
  </div>

let id = 0
export default {
  components: {},
  props: {},
  data() {
    return {
      key: '',
      props: {
        checkStrictly: true,
        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)
          }, 1000)
        }
      }
    }
  },

  methods: {
    visibleChange(flag) {
      if (!flag) {
        id = 0
        this.$refs.cascader.panel.store.nodes = []
        this.key += 1
      }
    }
  }
}