• 中文
    • English
  • 注册
    • 查看作者
    • 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);
      	}

    • 0
    • 0
    • 0
    • 503
    • 请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: