实现效果
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>