el-select分页加载和搜索

<el-form-item label="标签名" prop="value">
  <el-select v-model="queryParams.value" v-loadMore="loadMore" clearable @change="handleChange" :filter-method="filterMethod" filterable style="width:100%">
    <el-option v-for="(item,index) in valueArr" :key="index" :label="item.label" :value="item.label"></el-option>
  </el-select>         
</el-form-item>


directives: {
       loadMore: {
         inserted(el, binding) {
           const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');  // 获取下拉框元素
           dom.addEventListener('scroll', function () {       // 监听元素触底
             const condition = this.scrollHeight-2 - this.scrollTop <= this.clientHeight;
             if (condition) {
               binding.value();
             }
           })
         }
       }
     },
data(){
  queryParams:{
    pageno:1,
    pagesize:20,
    value:'',
  },
  total:0,
  valueArr:[],
  timer:null,
},
created(){
  this.getValuePage()
},
methods:{
loadMore() {
  if(this.queryParams.pageno*this.queryParams.pagesize<this.total){
    this.queryParams.pageno++
    this.getValuePage()
  }     
},
 filterMethod(val) {
         if(val){
          this.queryParams.value= val
            this.pageno = 1
            this.valueArr= []
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.getValuePage(value)
            }, 1000)
         }        	
        },
},
getValuePage() {
          getValueByPage({ pageno: this.queryParams.pageno, pagesize: this.queryParams.pagesize,value:this.queryParams.value}).then(res => {
           this.total= res.data.total
            for (var i in res.data.list) {
              this.valueArr.push({
                value: res.data.list[i].id,
                label: res.data.list[i].value
              });
            }
          });
        },