vue ant组件实现下拉框加载与搜索

select选择器

1. html

   <a-select
       :filter-option="false" #设置false否则web端没效果
       show-search
       :allowClear="true"
       v-decorator="[
                       'deviceCode',
                       { rules: [{ required: true, message: '请选择xxxxx!' }] },
                   ]"
       style="width:260px;"
       placeholder="选择或搜索xxxxx"
       @popupScroll="handlePopupScroll"
       @search="handleSearch"
       >
          <a-select-option v-for="item in device" v-bind:key="item.DEVICE_CODE" :value="item.DEVICE_CODE">
              {{item.DEVICE_NAME }}
          </a-select-option>
   </a-select>
   

2. data

   data() {
       return {
           scrollPage: 1,
           deviceData: [],//存放后台返回的数据
           keyword: '',
           device: [],//存放下拉框的数据
       }
   }
   

3. js

   /**
     * 下拉框 分页 搜索
     * @param name
     * @param code
     */
   changeDeviceCode() {
       this.$http.get("api/xxx/xxx" + "&deviceName=" + this.keyword + "&pageSize=100" + "&pageNum=" + this.scrollPage)
           .then(response => {
               this.device = response.data.data.data;
               this.deviceData = response.data.data;
       });
   },
   //选择设备编码下拉框滚动事件
   handlePopupScroll(e) {
       const { target } = e
       const scrollHeight = target.scrollHeight - target.scrollTop
       const clientHeight = target.clientHeight
       // 下拉框不下拉的时候
       if (scrollHeight === 0 && clientHeight === 0) {
           this.scrollPage = 1
       } else {
           // 当下拉框滚动条到达底部的时候
           if (scrollHeight < clientHeight + 5) {
               this.pageData(1);
           }else if (scrollHeight == 3208) {
               this.pageData(2);
           }
       }
   },
   pageData(type) {
       if (this.deviceData.totalPage < this.scrollPage) {
           this.scrollPage = this.deviceData.totalPage;
       } else {
           type == 1 ? this.scrollPage++ : this.scrollPage--;
           this.changeDeviceCode();
           let newData = [];
           let max = this.deviceData.allCount;
           this.device.forEach((item, index) => {
               if (index < max) {//当data数组的下标小于max时
                   newData.push(item)
               }
           })
           this.device = newData;
       }
   },
   handleSearch(keyword){
       this.keyword = keyword;
       this.changeDeviceCode();
   },