bugfix

src/components/PagedSelect.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref } from "vue";
+import InfiniteLoading from "v3-infinite-loading";
+import "v3-infinite-loading/lib/style.css"; //required if you're not going to override default slots
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+  },
+  remoteMethod: {
+    type: Function,
+  },
+  prop: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+const placeholder = ref();
+
+const loadMore = () => {
+  console.log("load more");
+};
+</script>
+
+<template>
+  <div class="app-container">
+    <el-popover
+      :popper-style="{
+        padding: 0,
+      }"
+      :width="320"
+      placement="bottom"
+      trigger="click"
+    >
+      <template #reference>
+        <div style="width: 320px">
+          <el-input :placeholder="placeholder" />
+        </div>
+      </template>
+      <el-scrollbar class="options-wrap" height="300">
+        <ul class="options">
+          <li v-for="i in 32" :key="i" class="option-item">option</li>
+        </ul>
+        <infinite-loading @infinite="loadMore"> </infinite-loading>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.options-wrap {
+  //height: 300px;
+
+  .options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .option-item {
+      color: #409eff;
+      height: 32px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      padding: 0 32px 0 20px;
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+}
+</style>