新增 组件

src/components/RemoteSelect.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-select
+    filterable
+    :multiple="multiple"
+    :multiple-limit="multiple ? 0 : 1"
+    remote
+    clearable
+    reserve-keyword
+    :placeholder="placeholder"
+    :loading="loading"
+    @change="selectItem"
+    @focus="getSelectList"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.key"
+      :label="item.value"
+      :value="{ value: item.key, key: item.value }"
+    />
+  </el-select>
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+import api from "../apis/fetch";
+import _ from "lodash";
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "请填写",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    api: String,
+    params: Object,
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ["selectItem"],
+  setup(props, { emit }) {
+    let loading = ref(true);
+    const getSelectList = _.debounce(
+      async (term) => {
+        if (options.value.length) return;
+        loading.value = true;
+        let res = await api[props.api]({
+          ...props.params,
+          term: "",
+        });
+        if (res.data.status == 0) {
+          options.value = res.data.result;
+        } else {
+          options.value = [];
+        }
+        loading.value = false;
+      },
+      2000,
+      { leading: true }
+    );
+    let options = ref([]);
+    const selectItem = (item) => {
+      emit("selectItem", item);
+    };
+
+    onMounted(() => {});
+    return {
+      getSelectList,
+      selectItem,
+      options,
+      loading,
+    };
+  },
+};
+</script>
+
+<style></style>