el-autocomplete 滚动到底部加载数据

问题：测试需求滚动到底部加载数据

解决方案：利用自定义指令滚动到底部后执行对应需要请求的方法

template部分

<el-autocomplete 
  size="small" 
  v-model="form.goods_name" 
  value-key="goods_name"
  v-scrollauto="load" :ref="`autocomplete${item.id}`"
  :fetch-suggestions="querySearchAsync" 
  placeholder="请输入内容"
  @select="clerkClick"></el-autocomplete>

自定义指令部分

directives: {
  scrollauto: {
    bind(el, binding, vnode) {
      let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
      let listDom = el.querySelector('.el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list')
      wrapDom.addEventListener("scroll", (e) => {
        let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 20 - listDom.offsetHeight
        if(condition > 0 && !vnode.context.loading){
          //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
          binding.value()
        }
      }, false)
    }
  }
}

加载数据部分

methods: {
  load(){
     // 加载数据方法
     // 赋值方法
     this.$refs[`autocomplete${this.activeName}`[0].$data.suggestions.push(item)
  }
}