<el-select v-model="value1"
filterable placeholder="请选择"
@change="getuser"
v-el-select-loadmore="loadmore"//这个是主要代码
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<script>
export default{
data() {
return {
value: [],
queryParams: this.userParams,
options: [],
value1: '',
restaurants: [],
options1: [{
worksType: '0',
label: '藏品'
}, {
worksType: '1',
label: '盲盒'
}],
disabled:false,
pageData: {
current: this.common.pageNum, //当前页
size: this.common.pageSize, //每页显示条数
},
page:"",
};
},
directives: {//注意:这个是写到data外面
'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()
}
})
}
}
},
methods:{
// 懒加载
loadmore () {
this.pageData.current++
this.handleChange(this.pageData.current)
},
// 请求数据
async handleChange(data) {
let param = {
roleType: "2",
current:data,
size: this.pageData.size,
};
await this.$api.customerAccountMgmt
.selectPlatUser(param)
.then((res) => {
if (res.code == 200) {
for (let index in res.data.records) {
this.options.push({
label: res.data.records[index].nickname,
value: res.data.records[index].userNo,
userId: res.data.records[index].userId,
})
}
this.pages=res.data.pages
} else {
this.$message({
message: res.message,
type: "error",
duration: this.common.duration,
});
}
});
},
}
}
</script>
以上代码就可以实现此功能,可以根据自己的需求和接口进行修改。