el-cascader饿了么级联选择器，滚动加载更多数据

根据业务需求，需要在左侧红框内实现向下滚动增加更多数据功能
方法：通过指令形式实现
1、定义指令：可以在组件内定义cascaderScroll，也可以全局定义指令

directives: {
    "cascaderScroll": function (el, binding) {
        const cascaderDom = el.querySelector(
              ".el-cascader__dropdown .el-cascader-menu__wrap"// 滚动条所在元素
          );
          if (cascaderDom) {
              cascaderDom.addEventListener("scroll", function () {
                  const condition =
                      this.scrollHeight - this.scrollTop <= this.clientHeight;
                  if (condition) {
                      let temp = this.scrollTop;
                      binding.value();
                      setTimeout(() => {
                          this.scrollTop = temp + 100;// 滚动加载更多时，显示的数据在上次位置基础上往上滑动100
                      }, 0)
                  }
              });
          }
    },
  },

2、使用指令：loadmore方法即为加载更多的逻辑

<el-cascader ref="refCascader" :props="treedata"  v-cascaderScroll="loadmore"></el-cascader>

3、我用的懒加载，需求是只有第一级分页滚动

data() {
    return {
      pageNo: 1,
      node: null, //懒加载缓存了一下node，用于在loadmore使用
      resolve:null //懒加载缓存了一下resolve，用于在loadmore使用
     }
  },
methods：{
	async loadmore() {
      console.log('下拉加载')
      this.pageNo++
      this.treedata.lazyLoad(this.node,this.resolve)
    },
	init() {
      let self = this;
        self.treedata = {
          lazy: true,
          async lazyLoad(node, resolve) {
            const { level, data } = node;
              if (level === 0) {
                self.node = node;
                self.resolve = resolve
              const data = await getFatherUnit({ unitName: '',pageNo:self.pageNo,pageSize:10 })
                data.data[0].records.forEach(e => {
                    e.value = e.unitId,
                    e.label = e.unitName,
                    e.leaf = e.unitIsChild === 1 // 1叶子节点 0非叶子节点
                })
                resolve(data.data[0].records)
            } else {
                const data = await getUnitByParentId({ unitId: node.value })
                data.data.forEach(e => {
                    e.value = e.unitId,
                    e.label = e.unitName,
                    e.leaf = e.unitIsChild === 1 // 1叶子节点 0非叶子节点
                });
                resolve(data.data)
            }
          }
      	}
    }
}

注意：定义指令时，要加上如下代码，否则数据渲染后会滑倒最上面一条显示

setTimeout(() => {
    this.scrollTop = temp + 100;// 滚动加载更多时，显示的数据在上次位置基础上往上滑动100
}, 0)

3、因为我用的懒加载，所以初始的时候要调用一下

mounted() {
    this.init()
  }

4、注：如果有多个级联框，当打开第二个级联框时，在合适的时机将分页需要初始到第一页。比如：visible-change下拉框出现/隐藏时触发