下拉框支持分页加载

jsowell-ui/src/main.js

@@ -84,3 +84,15 @@ new Vue({
   store,
   render: h => h(App)
 })
+
+Vue.directive('selectLoadMore', {
+  bind (el, binding) {
+    // 获取element-ui定义好的scroll盒子
+    const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
+    selectDom .addEventListener('scroll', function () {
+      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
+        binding.value()
+      }
+    })
+  }
+})

jsowell-ui/src/views/pile/station/pileList.vue

@@ -135,7 +135,10 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="产品型号" prop="modelId">
-              <el-select v-model="updateData.modelId" placeholder="请选择产品型号">
+              <el-select v-model="updateData.modelId" placeholder="请选择产品型号"
+                         v-selectLoadMore="selectLoadMore"
+                         :remote-method="remoteMethod"
+              >
                 <el-option
                   v-for="item in modelList"
                   :key="item.modelName"
@@ -212,16 +215,50 @@ export default {
       },
       // 型号列表
       modelList: [],
+      modelTotal: 0,
+      loadMoreFlag: true,
+      searchModelParam: {
+        name: '',
+        pageNo: 1,
+        pageSize: 10
+      },
     };
   },
   created() {
     // this.getPileList();
   },
   methods: {
+    // 下拉加载更多
+    selectLoadMore () {
+      console.log("触底了 ", this.searchModelParam.pageSize)
+      if (this.loadMoreFlag === false) {
+        return;
+      }
+      this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10;
+      console.log('触底了执行查询', this.searchModelParam);
+      this.getModelList();
+    },
+
+    // 远程搜索
+    remoteMethod (val) {
+      console.log('输入了', val)
+      this.loading = true
+      this.search.name = val
+      this.search.start = 1
+      this.list= []
+      setTimeout(() => {
+        this.loading = false
+        this.getModelList()
+      }, 500)
+    },
+
+    // 分页查询
     getModelList() {
-      listModel().then((response) => {
-        // console.log(this.modelList);
+      listModel(this.searchModelParam).then((response) => {
+        console.log("分页查询response", response);
+        this.modelTotal = response.total;
         this.modelList = response.rows;
+        this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal;
       });
     },
     /** 搜索按钮操作 */