<el-form-item label="业务主题:" prop="theme" required>
<el-select v-model="ruleForm.theme"
:placeholder="language.matter_theme"
v-el-select-loadmore="loadMoreTheme" class="w-600">
<el-option
v-for="item in themeList"
:key="item.domainId"
:label="item.domainName"
:value="item.domainId">
</el-option>
</el-select>
</el-form-item>
export default {
name: "",
directives: {
'el-select-loadmore': {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function () {
/**
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
data(){
return{
language:language,
projectConfig:projectConfig,
loading:false,
pageDataTheme: {
pageNum: 1,
pageSize: 20,
},//选择器滚动加载
themeList:[],//列表
}
}
},
methods:{
/**
* 列表懒加载
*/
loadMoreTheme() {
this.pageDataTheme.pageNum++;
this.getThemeList();
},
/**
* 获取列表
*/
getThemeList(){
this.loading = true;
axios.get(`/matter/themeList`, {
params: this.pageDataTheme}).then(res=>{
this.loading=false;
if(res.data && res.data.response){
//滚动到底部就调一次接口,将请求过的数据和本次调的数据合并得到全部数据
this.themeList = this.themeList.concat(res.data.response.content);
}
}).catch(e => {
this.loading=false;
if(e.data && e.data.errorCode) {
this.failTip(dictionary[e.data.errorCode])
} else {
this.failTip(language.error_500)
}
});
},
},
mounted(){
this.getThemeList();
}
el-select element 选择器懒加载,滚动加载
猜你喜欢
转载自blog.csdn.net/yxgd_1442962728/article/details/110521313
今日推荐
周排行