加载

src/main.js

@@ -108,6 +108,24 @@ import Sortable from 'sortablejs';
 //   } = require('../mock')
 //   mockXHR()
 // }
+
+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 = this.scrollHeight - this.scrollTop <= this.clientHeight;
+      if (CONDITION) {
+        binding.value();
+      }
+    });
+  }
+});
+
+
+
 
 new Vue({
   el: '#app',

src/utils/request.js

@@ -20,7 +20,7 @@ let loading ;
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000, // request timeout
+  timeout: 15000, // request timeout
   isLoading:true
 })
 

src/views/resource/components/addLr.vue

@@ -116,10 +116,12 @@
             <span style="color: red;font-weight: bold;padding-right: 4px;"></span>PN：
           </div>
           <div class="xy-table-item-content">
-            <el-select style="width:100%" filterable v-model="form.product_numbers" multiple collapse-tags
+            <el-select v-loadmore="loadMore" style="width:100%" filterable v-model="form.product_numbers" multiple collapse-tags
               placeholder="Please Select">
               <el-option v-for="item in productList" :key="item.id" :label="item.number" :value="item.id">
-              </el-option>
+              </el-option>
+              <div v-if="productPage>lastPage" style="text-align: center;">There is no more data</div>
+              <div v-else style="text-align: center;">Loading More</div>
             </el-select>
           </div>
         </div>
@@ -195,7 +197,9 @@
         table_name: 'literature_references',
         isShow: false,
         id: '',
-        type: 'add',
+        type: 'add',
+        productPage:1,
+        lastPage:0,
         productList: [],
         categoryList: [],
         applicationList: [],
@@ -294,10 +298,19 @@
 
       async getProductList() {
         const res = await getProduct({
-          page_size: 9999,
-          page: 1
-        })
-        this.productList = res.data
+          page_size: 100,
+          page: this.productPage
+        })
+        this.lastPage = res.last_page
+        this.productList.push(...res.data)
+      },
+      loadMore() {
+        // 这里写入要触发的方法
+        this.productPage += 1;
+        if(this.productPage>this.lastPage){
+          return
+        }
+        this.getProductList();
       },
 
       submit() {