1、添加前端组件：选择器支持滚动加载

2、代理配置-端口映射，新增和修改功能服务端端口字段选择器修改为支持滚动加载 3、代理配置-端口映射，后台接口getAvailablePortList修改参数内容并支持滚动加载模式也即是分页加载
2023-07-06 21:22:42 +08:00
parent cd4c9f2aae
commit a95b534701
8 changed files with 258 additions and 21 deletions
@@ -0,0 +1,168 @@
+<!--
+  采用github上面的开源组件https://github.com/johnhom1024/vue-load-select
+  不过有个bug，就是没办法展示下拉的箭头，目前修复的方式：等dom加载完毕后，补充箭头的class
+  参考：https://blog.csdn.net/weixin_42381896/article/details/122258563
+-->
+<template>
+  <el-select
+    ref="selectLoadMore"
+    :value="value"
+    v-loadmore="loadMore"
+    @focus="focus"
+    @clear="clear"
+    filterable
+    remote
+    :filter-method="handleSearch"
+    :loading="loading"
+    clearable
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-option
+      v-for="option in data"
+      :label="option[dictLabel]"
+      :value="option[dictValue]"
+      :key="option.value"
+    ></el-option>
+    <!-- 此处加载中的value可以随便设置，只要不与其他数据重复即可 -->
+    <el-option
+      v-if="hasMore"
+      disabled
+      label="加载中..."
+      value="-1" />
+    <!--补充页面无数据时，显示无数据的效果-->
+    <el-option
+      v-if="!hasMore && data.length==0"
+      disabled
+      label="暂无数据"
+      value="-2" />
+  </el-select>
+</template>
+
+<script>
+  export default {
+    name: "SelectLoadMore",
+    props: {
+      value: {
+        default: null
+      },
+      // 列表数据
+      data: {
+        type: Array,
+        default: () => []
+      },
+      dictLabel: {
+        type: String,
+        default: "label"
+      },
+      dictValue: {
+        type: String,
+        default: "value"
+      },
+      // 调用页数的接口
+      request: {
+        type: Function,
+        default: () => {
+        }
+      },
+      // 传入的页码
+      page: {
+        type: [Number, String],
+        default: 1
+      },
+      // 是否还有更多数据
+      hasMore: {
+        type: Boolean,
+        default: true
+      }
+    },
+    directives: {
+      // 这里实现一个组件内部的自定义指令
+      loadmore: {
+        // 指令的定义
+        bind(el, binding) {
+          const SELECTWRAP = el.querySelector(
+            ".el-select-dropdown .el-select-dropdown__wrap"
+          );
+          if (!SELECTWRAP) {
+            throw new Error('获取不到"el-select-dropdown__wrap"节点');
+          }
+          SELECTWRAP.addEventListener("scroll", () => {
+            // scrollTop  这里可能因为浏览器缩放存在小数点的情况，导致了滚动到底部时
+            // scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致无法请求更多数据
+            // 这里将scrollTop向上取整 保证滚到底部时，触发调用
+            const CONDITION =
+              SELECTWRAP.scrollHeight -
+              Math.ceil(SELECTWRAP.scrollTop) <=
+              SELECTWRAP.clientHeight;
+            // el.scrollTop !== 0 当输入时，如果搜索结果很少，以至于没看到滚动条，那么此时的CONDITION计算结果是true，会执行bind.value()，此时不应该执行，否则搜索结果不匹配
+            if (CONDITION && SELECTWRAP.scrollTop !== 0) {
+              binding.value();
+            }
+          });
+        }
+      }
+    },
+    data() {
+      return {
+        keyword: "", // 存储关键字用
+        loading: false
+      };
+    },
+    methods: {
+      // 请求下一页的数据
+      loadMore() {
+        // 如果没有更多数据，则不请求
+        if (!this.hasMore) {
+          return;
+        }
+        // 如果intercept属性为true则不请求数据，
+        if (this.loadMore.intercept) {
+          return;
+        }
+        this.loadMore.intercept = true;
+        this.request({
+          page: this.page + 1,
+          more: true,
+          keyword: this.keyword
+        }).then(() => {
+          this.loadMore.intercept = false;
+        });
+      },
+      // 选中下拉框没有数据时，自动请求第一页的数据
+      focus() {
+        if (!this.data.length) {
+          this.request({page: 1});
+        }
+      },
+      handleSearch(keyword) {
+        this.keyword = keyword;
+        this.loading = true;
+        console.log(keyword);
+        this.request({page: 1, keyword: keyword}).then(() => {
+          this.loading = false;
+        });
+      },
+      // 删除选中时，如果请求了关键字，则清除关键字再请求第一页的数据
+      clear() {
+        if (this.keyword) {
+          this.keyword = "";
+          this.request({page: 1});
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(function () {
+        // github代码有个bug，下拉的箭头无法加载的问题，需要等dom页面加载完毕后，添加箭头的class
+        let rulesDom = this.$refs["selectLoadMore"].$el.querySelector(
+          ".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
+        );// 找到dom
+        rulesDom.classList.add("el-icon-arrow-up");// 对dom新增class
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>