实现远程搜索opstion控制显示个数及滚动加载更多

实现远程搜索opstion控制显示个数及滚动加载更多

1. 需求:有时候数据返回太多,界面会卡顿,因此优化采用滚动加载更多的方法

2. 本例子主要利用了el中的远程搜索组件叠加

3. 实现的基本想法

   • 抽取控制列表的首次生成个数.通过index的判断,返回数组的长度

      show () {
           setTimeout(() => {
             this.loading = false;
             this.options = this.list.filter((item, index) => {
               return index < this.num ? (item.label.toLowerCase()
                 .indexOf(this.query.toLowerCase()) > -1) : ''
             });
           }, 200);
         },
     

   • 利用directives自定义指令,监听滚动事件,到底的时候更改num的值,并触发生show方法,.增加数据

      directives: {
         'loadmore': {
           inserted (el, binding) {
             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();
               }
             });
           }
         }
       },
     

     loadmore () {
           this.num = this.num + 3
           this.show()
           // this.remoteMethod()
           console.log(123, this.num)
         }
     

   • 每次重新搜索的时候记得重置num的数值和query的值

       remoteMethod (query) {
           // this.query = ''
           if (query !== '') {
             this.loading = true;
             this.query = query
              this.num = 8
             this.show()
           } else {
             this.options = [];
           }
         },
     

完整代码如图所示

<template>
  <div id="selectBox">
    <el-select v-model="value"
               multiple
               filterable
               remote
               reserve-keyword
               placeholder="请输入关键词"
               :remote-method="remoteMethod"
               :loading="loading"
               v-loadmore='loadmore'>
      <el-option v-for="item,index in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                 :disabled="index>num">
      </el-option>
    </el-select>
  </div>

</template>

<script>
export default {
  directives: {
    'loadmore': {
      inserted (el, binding) {
        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();
          }
        });
      }
    }
  },
  data () {
    return {
      options: [],
      value: [],
      num: 8,
      list: [],
      query: '',
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
    }
  },
  mounted () {
    this.list = this.states.map((item, index) => {
      return { value: `value:${item}`, label: `label:${item}` }
    });
  },
  methods: {
    show () {
      setTimeout(() => {
        this.loading = false;
        this.options = this.list.filter((item, index) => {
          return index < this.num ? (item.label.toLowerCase()
            .indexOf(this.query.toLowerCase()) > -1) : ''
        });
      }, 200);
    },
    remoteMethod (query) {
      // this.query = ''
     
      if (query !== '') {
        this.loading = true;
        this.query = query
         this.num = 8
        this.show()
      } else {
        this.options = [];
      }
    },
    loadmore () {
      this.num = this.num + 3
      this.show()
      // this.remoteMethod()
      console.log(123, this.num)
    }
  }
}
</script>
<style  >
li {
  display: block !important;
}
</style>