Vue2 element cascader级联选择器懒加载编辑时回显数据

element cascader组件渲染大量数据时会造成页面渲染卡顿，给用户造成不好的体验，因此在这种情况下都会采用懒加载方式展示数据，但是会造成一个问题，就是编辑表单时由于cascader数据还没有加载，那么已选择的数据无法回显，下面是解决方案(递归元素click事件触发cascader-lazyLoad事件)

  mounted() {
  // 一定要缓存一份选择的回显数据，不然html click时会清空已选择的数据，导致子级无法递归
    this.tempTagValues = JSON.parse(JSON.stringify(this.itemValue.tagConditions));
    // 500毫秒后再渲染标签，防止多个组件渲染卡顿
    setTimeout(() => {
      this.isTag = true;
    }, this.tagTime);
  }

el-cascader组件配置，通过popper-class加随机数设置唯一className防止动态表单存在相同组件，通过默认slot配置级联html元素下面方法递归需要通过html click事件，isTag是动态表单时添加的一个定时渲染，每500毫秒渲染一个el-cascader组件，可以更好的提升渲染效果

// 标签懒加载方法
const handleTagChildren = (paths, options) => {
  const code = paths.shift();
  const tagItem = options.find((item) => item.code === code);
  if (paths.length) {
    return handleTagChildren(paths, tagItem.children);
  }
  return (tagItem.children || []).map((item) => {
    return {
      ...item,
      children: []
    };
  });
};

// el-cascader组件懒加载触发初始时，调用级联子级html click
hanldeLazyLoad(node, resolve) {
      if (node.level === 0) {
        const list = this.tagOptions.map((item) => {
          return {
            ...item,
            children: []
          };
        });
        resolve(list);
        // 加载完第一级联时递归加载已选择级联
        this.$nextTick(() => {
          this.handleTagClick(this.tempTagValues);
          // 隐藏级联选择层
          setTimeout(() => {
            this.$refs.tagCascader.dropDownVisible = false;
          }, 0);
        });
      } else {
      // 这里按照你的数据格式做懒加载处理
        resolve(handleTagChildren([...node.path], this.tagOptions));
      }
    }

handleTagClick(data) {
      if (!data.length) {
        return 0;
      }
      const paths = data.shift();
      const handle = (index) => {
        this.$nextTick(() => {
          // 获取级联节点，从第一级开始
          const tagEls = document.querySelectorAll(`.event-rule-tag-${this.brandSeriesKey} .tag-item-${index}`);
          tagEls.forEach((el) => {
            // 获取级联节点中的code
            const code = el.dataset.code;
            if (paths[index] === code) {
              if (paths.length - 1 === index) {
                // 如果是最后一级节点则checkbox点击，label兄弟节点
                el.parentNode.previousElementSibling.click();
                // checkbox点击后再循环下一级
                 if (data.length) {
                  this.handleTagClick(data);
                }
              } else {
                // code相等则级联节点点击，父元素li
                el.parentNode.parentNode.click();
              }
              handle(index + 1);
            }
          });
        });
      };
      handle(0);
    }