基于element Select二次封装带滚动分页的选择器

实现效果

select选择器滚动到底部请求下一页

组件封装

<template>
  <el-select
    class="search-wrapper-second"
    v-model="selectValue"
    filterable
    remote
    :filter-method="handleSearch"
    v-loadmore="loadMore"
    v-bind="$attrs"
  >
    <el-option
      v-for="item in arrList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <status-badge
        v-if="showBadge"
        :text="item.label"
        :status="badgeMap[item.status]"
      ></status-badge>
    </el-option>
  </el-select>
</template>
<script>
import { cloneDeep, debounce, isEmpty, uniqBy } from 'lodash-es';
import StatusBadge from '@common/components/status-badge';
const PAGE_INDEX = 1;
export default {
  components: { StatusBadge },
  model: {
    prop: 'selected',
    event: 'change'
  },
  props: {
    selected: String, //默认选中的值

    //当默认选中的值不在第一页的请求结果中,没有对应的label时,需要把第一项拼到options,显示相应的label
    defalutOption: { type: Object, default: () => {} },
    //是否还有下一页
    hasMore: {
      type: Boolean,
      default: true
    },
    //每次请求的数据
    list: {
      type: Array,
      default: () => []
    },
    showBadge: Boolean, //是否展示标记

    //标记类型map,需要和showBdge配合使用
    badgeMap: {
      type: Object,
      default: () => {}
    },
    isInitPage: Boolean //是否清空page,从第一页开始请求
  },
  data() {
    return {
      page: PAGE_INDEX,
      selectValue: cloneDeep(this.selected),
      arrList: [],
      keyword: ''
    };
  },
  watch: {
    list: {
      handler(nv) {
        if (!isEmpty(this.defalutOption)) {
          this.arrList[0] = this.defalutOption;
        }
        console.log(this.arrList);
        this.arrList = [...this.arrList, ...nv];
        this.arrList = uniqBy(this.arrList, 'value');
      },
      immediate: true
    },
    selected: {
      handler(nv) {
        this.selectValue = this.selected;
        this.$emit('change', nv);
      },
      immediate: true
    },
    selectValue(nv) {
      this.$emit('change', nv);
    },
    isInitPage(nv) {
      this.page = nv ? PAGE_INDEX : this.page;
    },
    keyword() {
      this.arrList = [];
      this.page = PAGE_INDEX;
    }
  },
  methods: {
    loadMore() {
      if (!this.hasMore) return;
      this.page++;
      this.$emit('load-more', this.page, this.keyword);
    },
    handleSearch(keyword) {
      this.keyword = keyword;
      this.fetchSearch(keyword);
    },
    fetchSearch: debounce(function(keyword) {
      this.$emit('load-more', this.page, keyword);
    }, 500)
  }
};
</script>

组件使用

  <template>
   <select-search-paging
      :key="gitType"
      class="search-wrapper-second"
      v-model="gitTag"
      @load-more="loadMore"
      @fetch-search="fetchSearch"
      :list="list"
    ></select-search-paging>
  </template>
<script>
export default {
data(){
return {
list:[]
}
},
	methods:{
		loadMore(page) {
	      this.page = page;
	      this.getList(this.gitType);
	    },
	    fetchSearch(page, keyword) {
	      this.list = [];
	      this.page = page;
	      this.keyword = keyword;
	      this.hasMore = true;
	      this.getList(this.gitType);
	    },
	    async  getList(gitType) {
	      if (!this.hasMore) return;
	     	this.list = await ...//去请求数据
    	}
	}
}
</script>