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

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

1.template中

          
            {{ item.customerName }}
            //a-select扩展菜单使用 dropdownRender 插槽
            

              
              
              

                

                  上一页
                
                
当前第{{ nowPage }}页
                

                  下一页
                
              
            
          

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.效果