ant的a-select远程搜索加分页

a-select扩展菜单使用 dropdownRender 插槽并且增加搜索调后端接口，整理一下

1.template中

          <a-select
            show-search
            :default-active-first-option="false"
            :showArrow="false"
            @change="getName"
            :filter-option="false"
            @search="search"
            placeholder="请输入姓名"
            v-decorator="['name', validatorRules.name]"
          >
            <a-select-option
              v-for="item in customerList"
              :key="item.customerId"
              :value="item.customerId"
              >{
  { item.customerName }}</a-select-option
            >
            //a-select扩展菜单使用 dropdownRender 插槽
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />
              <div
                style="display: flex; justify-content: space-between; align-items: center"
              >
                <div
                  style="padding: 4px 8px; cursor: pointer"
                  @mousedown="(e) => e.preventDefault()"
                  @click="getCustomerList('pre')"
                  v-show="nowPage"
                >
                  上一页
                </div>
                <div>当前第{
  { nowPage }}页</div>
                <div
                  style="padding: 4px 8px; cursor: pointer"
                  @mousedown="(e) => e.preventDefault()"
                  @click="getCustomerList('next')"
                  v-show="nowPage + 1 !== maxPage"
                >
                  下一页
                </div>
              </div>
            </div>
          </a-select>

2.data

//只展示必要字段

components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
data() {
//防抖
    this.search = debounce(this.search, 800);
    return {
      nowPage: 1,
      maxPage: 1,

3.methods

//通过查询出来的名字，接口返回其他内容 来赋值给下面其他字段
getName(id) {
      this.$nextTick(() => {
        let obj = {};
        this.customerList.map((item) => {
          if (item.customerId == id) {
            obj = { ...item, age: item.customerAge };
            this.name = item.customerName;
          }
        });
        this.form.setFieldsValue(obj);
      });
    },
    search(val) {
      this.searchContent = val;
      this.nowPage = 1;
      this.getCustomerList();
    },
    getCustomerList(type) {
      if (type == "pre" && this.nowPage > 1) {
        this.nowPage -= 1;
      } else if (type == "next") {
        this.nowPage += 1;
      }
//搜索条件为空则不查询，因为后端数据太大
      if (!this.searchContent) {
        this.customerList = [];
        return;
      }
      getAllCustomerList({
        pageNo: this.nowPage,
        pageSize: 10,
        phone: this.searchContent,
      }).then((res) => {
        if (res.code == 200) {
          this.customerList = res.result.records;
          this.maxPage = res.result.pages;
        }
      });
    },

4.防抖

export function debounce(fn, delay) {
    let timer = null; // 形成闭包
    return function () {
      if (timer) {
        clearTimeout(timer); // 防抖
      }
      timer = setTimeout(() => {
        fn(); // 执行传入的函数
      }, delay);
    };
  }

5.效果