Element-Ui 下拉框 下拉到底 事件

示例:

// 创建Vue自定义事件
/** 自定义下拉框下拉到底事件 */
'el-select-loadmore': {
bind(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();
}
});
}
}

完整Vue文件

<template>
<div class="main-div">
<el-select v-model="selectTest" placeholder="请选择" v-el-select-loadmore="selectLoadMoreSnInfo"
>
<el-option label="测试1" value="1"></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'record',
props: [''],
// 创建自定义事件
directives: {
/** 自定义下拉框下拉到底事件 */
'el-select-loadmore': {
bind(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 {
selectTest: 1
}
},
methods: {
// 下拉列表触底事件
selectLoadMoreSnInfo() {
console.info('下拉框到底触发')
},
components: {},
computed: {},
created() {
},
beforeMount() {
},
mounted() {
},
watch: {}
}
</script>
<style lang="scss" scoped>
</style>

最后

以上就是强健棒球为你收集整理的Element-Ui 下拉框 下拉到底 事件的全部内容，希望文章能够帮你解决Element-Ui 下拉框 下拉到底 事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。