1.选择器鼠标滚动到底部,加载更多数据,效果如图:
2.使用方法:
1)npm安装依赖
npm install select-loading -S
2)main.js
import selectLoading from 'select-loading'
Vue.use(selectLoading)
3)页面里面
<template>
<div>
<select-loading
placeholder="请选择测试"
size="mini"
v-model="value"
:loading="loading"
:pageNum="pageNum"
:pageSize="pageSize"
:total="total"
:list-data="listData"
optionLabel="mm"
optionValue="mm"
@loadMore="loadMore"
></select-loading>
</div>
</template>
<script>
export default {
data () {
return {
value: '',//选择器绑定参数
pageNum:1,
pageSize:3,
total:50,
loading:false,
listData:[]
}
},
mounted() {},
methods:{
loadMore(){
this.loading = true;
this.pageNum++;
//请求后端接口成功事件
let obj=res.data;
this.listData = [...this.listData,...obj];//push数据进下拉组件绑定数组
this.loading = false;
}
}
</script>
<style></style>
a)slect-loading参数详解
参数名 | 含义 |
---|---|
optionLabel | 下拉组件绑定显示的名称 |
optionValue | 下拉组件绑定值的名称 |
size | 下拉组件大小,同el-select |
placeholder | 无值时输入框默认提示语 |
listData | 下拉组件绑定数组 |
loading | 下拉组件加载 |
pageNum | 当前页 |
pageSize | 每页数量 |
total | 总的数量条数 |
b)slect-loading事件详解
事件名 | 含义 |
---|---|
loadMore | 加载数据的事件 |
(详细使用请参考官网:(https://www.npmjs.com/package/select-loading))