Element Select选择器从服务器搜索数据，输入关键字进行查找（从服务器获得的数据有分页）

先说一说需求：后台管理系统的一个下拉筛选框，下拉的数据要从后台获取，每次输入关键字从后台获取下拉条目，获取的下拉条目是带有分页的。

需求分析：那么有两点需要处理，第一，在输入框数据发生变化时首先向后台请求数据并且渲染在下拉框里面，注意这时请求的数据是带有分页的，所以要在下拉框进行滑动的时候页码加一继续请求数据，也就是要进行loadmore逻辑的处理；第二，监听下拉框选择的数据，当选择的数据变化的时候，带着这个选择的数据（作为筛选条件）去进行主列表的请求。

下面附上代码：

      <div class="datePicker" style="display:inline-block;margin-right:10px;">标签：
        <el-select v-model="tagArr" v-el-select-loadmore="loadmore" filterable multiple collapse-tags placeholder="请选择" style="width:250px;" :filter-method="tagSearch" clearable>
          <el-option
            v-for="(item, i) in tagOption"
            :key="i"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>

<script>
export default {
// 这里自定义下拉加载的指令
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          /**
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  data() {
    return {
      info: {},
      isLoad: true,
      tagOption: [],
      filter: {
        pageNo: 1,
        pageSize: 10,
        tags: [],
      },
      tagFilter: {
        pageNo: 1,
        pageSize: 50,
        keyword: ''
      }
    }
  },
  watch: {
    tagArr(newVal, oldVal) {
      this.filter.tags = newVal
      // console.log(this.filter.tags, '这里是选择的标签')
      this.getListTo1()
    }
  },
  methods: {
    getListTo1() {
      // 进行搜索的时候页码要跳到1
      this.filter.pageNo = 1
      this.getList()
    },
    loadmore() {
      // 当还有标签的时候再继续请求
      if (this.isLoad) {
        this.tagFilter.pageNo++
        this.getTagsList()
      }
    },
    tagSearch(val) {
      // console.log(val, '搜索标签了')
      this.tagFilter.keyword = val
      this.tagFilter.pageNo = 1
      this.tagOption = []
      this.getTagsList()
    },
    getTagsList() {
      wallPapersTags(this.tagFilter).then(res => {
        // console.log(res, '这里是所有的标签列表')
        for (const item of res.list) {
          this.tagOption.push(item)
        }
        // this.tagOption = res.list
        this.isLoad = res.more
      })
    },
    getList() {
      wallPapersList(this.filter).then(res => {
        this.info = res
        this.listLoading = false
      })
    }
   }
 }
 </script>

到此，这样一个很小的功能就结束了。
功能虽小，但是要注意的细节还是很多的，所以我选择记录下来一方面为了自己加深印象，另一方面希望能够给到过路的人一点点帮助，哈哈哈！
加油，感谢那个正在努力的自己！！！