
element-ui select 下拉框做成下拉加载更多
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
注意: vue 版本需要 ≥ 3.3
1、html
<el-select
v-model="relation_type"
placeholder="请选择合作类型"
ref="select"
>
<el-option
v-for="item in cooperationTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
2、主文件
import { useElSelectionInfinityScroll } from '@/utils/combinationFunc';
setup(props, context) {
const data = reactive({
noMore: false,
loading: false,
cooperationTypeList: []
});
const { proxy } = getCurrentInstance();
const loadMore = () => {
if (data.loading) return;
data.loading = true;
if (proxy.cooperationTypeList.length > 40) {
// 获取到最后的值时,不再监听滚动条的动作,移除滚动事件
data.noMore = true;
}
proxy.cooperationTypeList.push(...proxy.cooperationTypeList);
data.loading = false;
};
onMounted(() => {
const elem = proxy.$refs.select.$refs.scrollbar.$refs.wrap;
useElSelectionInfinityScroll(elem, loadMore, () => data.noMore);
});
}
自行补充接口调用相关方法
3、 @/utils/combinationFunc.js
import { onUnmounted, toValue, watchEffect } from 'vue';
import { Throttle } from '@/utils/debunce';
export function useElSelectionInfinityScroll(target, callback, noMore) {
onUnmounted(() => target.removeEventListener('scroll', Throttle(scolling, 300)));
const scolling = () => {
if (toValue(noMore)) return;
const canLoadMore = target.scrollHeight - target.scrollTop <= target.clientHeight;
if (canLoadMore) {
callback();
}
};
watchEffect(() => { scolling(); });
target.addEventListener('scroll', scolling);
}




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45
10 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 10 个月前
更多推荐
所有评论(0)