前端 - 输入框滚动加载与搜索如何进行封装？

Question

技术 vue2 项目 框架是 antdv 1.7.8
我项目中有很多表单，表单中有很多Select 选择器 选择器的内容是项目中的某一个列表，有很多这种下拉，在不同的界面。
我的问题是，单独的每一个下拉框都可以进行 远程搜索与滚动加载，但是接口是不同的，所以如何进行封住一下写一个，所有的下拉框都能用。
代码demo如此

<template>  <div>    <div>      <a-select style="width: 500px;" v-model="queryParam.industry_id" show-search :filter-option="false"        :default-active-first-option="false" @search="handleSearch" @popupScroll="handlePopupScroll">        <a-select-option v-for="(item, index) in industryList" :key="index" :value="item.industry_id">            {{item.industry_name }}        </a-select-option>      </a-select>    </div>    <div>      <a-select style="width: 500px;" show-search :filter-option="false" :default-active-first-option="false"        @search="handleSearchEnt" v-model="queryParam.ent_id" @popupScroll="handlePopupScrollEnt">        <a-select-option v-for="(item, index) in industryEntList" :key="index" :value="item.ent_id">            {{ item.ent_name}}        </a-select-option>      </a-select>    </div>  </div></template><script>import {  orgSelectAPI,  orgEntSelectAPI,} from "@/api/enterprise.js";import _ from "lodash";export default {  data() {    return {      queryParam: {},      industryList: [], // 产业下拉数据      industryCount: 10, // 产业默认10个      industrySize: 0, // 总条数数据改变时候必须低于这个值      industrySearch: "", // 远程搜索值      industryEntList: [],      entCount: 10,      entSize: 0,      industryEntSearch: "",    };  },  created() {    this.getIndustryList();    this.getIndustryEntList();  },  methods: {    // 产业下拉加载    handlePopupScroll: _.debounce(function (e) {      const { target } = e;      const { scrollTop, scrollHeight, offsetHeight } = target;      if (        this.industryCount <= this.industrySize &&        scrollTop + 2 + offsetHeight >= scrollHeight      ) {        this.industryCount = Math.min(          this.industryCount + 10,          this.industrySize        );        this.getIndustryList(this.industrySearch);      }    }, 500),    // 远程搜索    handleSearch: _.debounce(function (e) {      this.industrySearch = e;      this.getIndustryList(this.industrySearch);    }, 500),    // 获取产业数据    async getIndustryList(e) {      let res = await orgSelectAPI({        page: 1,        rows: e ? 0 : this.industryCount,        name: e,      });      this.industry_id = "";      this.industryList = [];      this.industrySize = res.data.total;      this.industryList = res.data.rows;    },    handleSearchEnt: _.debounce(function (e) {      this.industryEntSearch = e;      this.getIndustryEntList("", e);    }, 500),    handlePopupScrollEnt: _.debounce(function (e) {      const { target } = e;      const { scrollTop, scrollHeight, offsetHeight } = target;      if (        this.entCount <= this.entSize &&        scrollTop + 2 + offsetHeight >= scrollHeight      ) {        this.entCount = Math.min(this.entCount + 10, this.entSize);        this.getIndustryEntList(this.industry_id, this.industryEntSearch);      }    }, 500),    // 获取企业数据    async getIndustryEntList(e, name) {      let res = await orgEntSelectAPI({        page: 1,        rows: this.entCount,        industry_id: e,        name,      });      this.industryEntList = []      this.industryEntList = res.data.rows;      this.entSize = res.data.total;    },  },};</script>

像这种数据我有很多，这种下拉出现一个我就得定义一个 count与 size 还有搜索与滚动的函数，写起来很麻烦，但是接口又不相同，我该如何进行封装一下，让这个东西写一次，后边的都能用

求大佬给个封装思路，接口与数据如何搞

Answer 1

官方示例：
https://3x.ant.design/components/select-cn/

Answer 2

封装：

<template>  <div>    <a-select       style="width: 500px;"       v-model="selectedValue"       show-search       :filter-option="false"      :default-active-first-option="false"      @search="handleSearch"       @popupScroll="handlePopupScroll"    >      <a-select-option         v-for="(item, index) in itemList"         :key="index"         :value="item[valueKey]">          {{ item[labelKey] }}      </a-select-option>    </a-select>  </div></template><script>import _ from "lodash";export default {  props: {    apiFunction: {      type: Function,      required: true,    },    queryParams: {      type: Object,      default: () => ({}),    },    valueKey: {      type: String,      default: 'id',    },    labelKey: {      type: String,      default: 'name',    },    initialCount: {      type: Number,      default: 10,    },  },  data() {    return {      selectedValue: null,      itemList: [],      itemCount: this.initialCount,      itemSize: 0,      itemSearch: "",    };  },  created() {    this.getList();  },  methods: {    async getList(searchValue = "") {      const response = await this.apiFunction({        ...this.queryParams,        page: 1,        rows: searchValue ? 0 : this.itemCount,        name: searchValue,      });      this.itemList = response.data.rows;      this.itemSize = response.data.total;    },    handleSearch: _.debounce(function(value) {      this.itemSearch = value;      this.getList(this.itemSearch);    }, 500),    handlePopupScroll: _.debounce(function(e) {      const { target } = e;      const { scrollTop, scrollHeight, offsetHeight } = target;      if (        this.itemCount <= this.itemSize &&        scrollTop + 2 + offsetHeight >= scrollHeight      ) {        this.itemCount = Math.min(this.itemCount + 10, this.itemSize);        this.getList(this.itemSearch);      }    }, 500),  },};</script>

用的地方：

<template>  <div>    <CustomSelect       :api-function="orgSelectAPI"       :query-params="{ additionalParam: 'someValue' }"      value-key="industry_id"      label-key="industry_name"    />    <CustomSelect       :api-function="orgEntSelectAPI"       :query-params="{ anotherParam: 'someOtherValue' }"      value-key="ent_id"      label-key="ent_name"    />  </div></template><script>import { orgSelectAPI, orgEntSelectAPI } from "@/api/enterprise.js";import CustomSelect from "@/components/CustomSelect.vue";export default {  components: {    CustomSelect,  },};</script>