选择器分页，加载更多

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)）