element-ui中select搜索以及分页

后台管理经常会有下拉框数据很多，会用分页加载数据，这里主要是用了自定义指令el-select-loadmore；搜索方法就是用的element-ui中的远程搜索方法；

1.loading是在加载等待数据时展示loading图标，同时可以加上loading-text加载文字，一般这个文字会时"加载中"；
2.搜索需要把filterable、remote设置为true。"remote-method"这个是搜索的方法；
3.change选中值发生变化时触发的方法；
4.v-el-select-loadmore,这个名称是directives指令名；这个是下拉加载方法；
5.focus获得焦点时触发的方法；

<el-select
  v-model.trim="brandName"
  placeholder="请选择品牌名"  
  filterable
  clearable
  remote
  :remote-method="searchMethod"
  :loading="loading"
  @change="brandChange"
  v-el-select-loadmore="getBrand"
  :height="50"
  style="width:80%"
  @focus="focusMainBrand"
>
  <el-option
    v-for="dict in brands"
    :key="dict.id"
    :label="dict.name"
    :value="dict.id"
  />
</el-select>

method方法；

searchMethod(query){
  //这里的query就是输入的值；
  this.loading = true;
  this.name = query; //传给后台的值；
  this.pageIndex = 0;  
  this.getBrand();
},
getBrand() {
    ++this.pageIndex;
    //这里就是从后台获取数据；
    setTimeOut(()=>{
        //获取数据成功之后赋值option的数组；
        if(this.pageIndex==1){
            //如果是第一页，列表等于后台传回来的数组；            
        }else{
            //如果不是第一页，列表需要用concat方法，或者是[...]用扩展运算符；
        }
    })
}，
brandChange(e) {
    //这个e等于option里面的value值，这里的value取得是列表中得id,如果想除了id还想获取name的值；
    //这里可以用数组的循环方法，然后判断id与e相同，在把name值附上；    
}
focusMainBrand() { //触发时，用空值搜索
    this.searchMethod("")
}

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 () {
              const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
              if (condition) {
                  binding.value();
              }
          });
      }
    },