ElementUi框架让el-select选择器下拉框滚动加载更多的数据

需求：

当el-select选择器(下拉框)需要加载几百、甚至上千 上万条数据时，如果你直接一次性全部加载会导致页面卡死，最优的方案就是实现分页加载，下拉框每次只加载50条数据，当用户滚动到底部时，需要显示更多数据时，再到后台获取第2页的数据。

实现方案：

1、html部分代码

<!--引入element-ui框架-->
<link rel="stylesheet" href="static/plugins/element-ui/css/index.css">

<div class="layui-form-item" style="display:flex;">
    <label class="col-md-2" style="text-align:right;">选择物品</label>
    <div class="col-md-7">
        <el-select
	    v-model="itemid"
	    v-loadmore="loadMore"
	    @change="selectChange" placeholder="请选择">
        	<el-option
        	    v-for="item in itemList"
        	    :key="item.id"
        	    :label="item.name"
        	    :value="item.id"
        	></el-option>
	</el-select>
    </div>
</div>

从上面的代码可以看出来，el-select选择器里我绑定了一个v-loadmore事件，这个事件在Vue.js里是没有的，而是我新增的。因此我们需要在下面的js代码中注册这个事件。

2、js部分代码：

<!--引入element-ui框架-->
<script src="static/plugins/element-ui/vue/vue.min.js" charset="utf-8"></script>
<script src="static/plugins/element-ui/js/index.js" charset="utf-8"></script>
<script type="text/javascript">
// 注册滚动条加载触发事件v-loadmore绑定
Vue.directive('loadmore', {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = parseInt(this.scrollHeight - this.scrollTop) <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
});
var obj = new Vue({
    el: '#app',
    data: function() {
        return {
            itemList: [],
            itemid: 0,
            itemsData: [],
            jsonData: {},
            currentPage: 1,//当前第几页
            total: 0,//总条数
            pageSize: 10,//每页显示多少条数据

        }
    },
    /*初始化*/
    created: function() {
        this.getItemList();
    },
    methods: {
        getItemList() {
            var that = this;
            that.jsonData["page"] = that.currentPage;
            that.jsonData["limit"] = that.pageSize;
            $.ajax({
                type: "GET",
                url: '/getItemList.html',//PHP后端请求获取select数据的地址
                dataType: "json",
                data: that.jsonData,
                contentType: "application/json;charset=UTF-8",
                success: function(res) {
                    if (res.code == 1) {
                        // 将返回的数据连接起来
                        that.itemList = that.itemList.concat(res.data) that.total = res.count;
                        //默认显示第一个
                        that.itemid = that.itemList[0].id;
                    } else {
                        toastr.error(res.msg);
                        that.itemList = [{
                            id: 0,
                            name: '无数据'
                        }];
                        that.itemid = 0;
                    }
                },
                error: function(error) {
                    console.log("请求数据异常，Error：" + error);
                }
            });
        },
        selectChange(id) {
            var that = this;
            let name = "";
            if (id != "" && id != null && id != "undefined") {
                for (let i in that.itemList) {
                    if (that.itemList[i]["id"] === id) {
                        name = that.itemList[i]["name"];
                        break;
                    }
                }
                var temp = {
                    id: id,
                    title: name,
                    number: "1"
                };
                this.itemsData.unshift(temp);
            }
        },
        loadMore() {
            /*改变默认的页数*/
            this.currentPage++;
            this.getItemList()
        },
    }
});

3、PHP后端代码：

	/**
        ** @name='获取物品列表'
        */ 
	public function getItemList(){
		$data=$_GET;
		$data['page'] = isset($data['page']) ? $data['page'] : 1; 
		$pageSize = isset($data['limit']) ? intval($data['limit']) : 10; 
		//物品名称
		$name = (isset($data['name']) && !empty($data['name'])) ? trim($data["name"]) : "";
		//从json文件获取物品集合
		$itemList = json_decode(file_get_contents("./ItemTable.json"), true);
		$tempList = [];
		if (empty($name)) {
			$tempList = $itemList;
		}else{
			foreach ($itemList as $k => $v) {
				//根据ID或者名称查询
				if (strpos($v["id"], $name) !== false || strpos($v["name"], $name) !== false) {
					array_push($tempList, $v);
				}
			}
		}
		$count = count($tempList);
		// 计算总页数
		$totalPage = ceil($count / $pageSize);
		// 计算起始位置
		$current_begin = (intval($data['page']) -1) * $pageSize;		
		// 获取当前页数据
		$currentPageData = array_slice($tempList, $current_begin, $pageSize);
		if($count>0){
			$result["code"] = 1;
			$result["data"] = $currentPageData;
			$result["count"] = count($currentPageData);	
		}else{
			$result["code"] = 0;
			$result["msg"] = "查询不到相关数据";
		}
		return json($result);
	}