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

该博客介绍基于Element Select二次封装带滚动分页的选择器。实现效果为select选择器滚动到底部会请求下一页,还涉及组件封装和使用,使用了v-loadmore自定义指令。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现效果

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>

v-loadmore自定义指令

  Vue.directive('loadmore', {
    bind(el, binding) {
      const SELECTWRAP = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      );
      SELECTWRAP.addEventListener('scroll', function() {
        //这个条件判断是否滚动到了底部(当总高度减去已滚动距离小于等于可见高度时)
        const CONDITION =
          this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight;
        // 当滚动到底部且不是初始位置时(scrollTop !== 0 排除初始状态)
        if (CONDITION && this.scrollTop !== 0) {
          binding.value();
        }
      });
    }
  });
你可以使用 Element Plus 中的 `el-select` 和 `el-pagination` 组件来实现分页的下拉选项。 首先,你需要在面中引入 Element Plus 组件库。然后,在你的组件中,你可以使用 `el-select` 组件来创建下拉选项,同时使用 `el-pagination` 组件来实现分页功能。 以下是一个简单的示例代码,其中 `options` 是下拉选项数据,`pageSize` 是每显示的选项数量,`currentPage` 是当前码。 ```vue <template> <div> <el-select v-model="selectedOption" placeholder="请选择"> <el-option v-for="option in displayedOptions" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> <el-pagination :page-size="pageSize" :total="options.length" v-model="currentPage"></el-pagination> </div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const options = [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' }, // ... ]; const selectedOption = ref(''); const currentPage = ref(1); const pageSize = 5; const displayedOptions = computed(() => { const startIndex = (currentPage.value - 1) * pageSize; const endIndex = startIndex + pageSize; return options.slice(startIndex, endIndex); }); return { options, selectedOption, currentPage, pageSize, displayedOptions, }; }, }; </script> ``` 在上述代码中,我们使用 `computed` 函数来计算当前码显示的选项。根据当前码和每显示的选项数量,我们可以计算出应该从哪个索引开始和结束,然后使用 `slice` 方法来获取对应的选项。最后,我们将计算得到的选项数组传递给 `el-select` 组件的 `v-for` 指令来渲染下拉选项。同时,我们使用 `el-pagination` 组件来渲染分页器,并且将 `currentPage` 绑定到组件的 `v-model` 属性中,以便在面上切换码时更新当前码。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胡萝卜大王驾到

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值