ant-design vue select组件实时远程查询接口数据


      
        
          
            
              
              {{item.bankName}}
            
          
        
      
import debounce from 'lodash/debounce'
export default {
  data() {
    this.lastFetchId = 0 // 只取最后一次结果
    this.fetchBankName = debounce(this.doSearchBankNameList, 800)
    return {
          fetching: false // 查询时的loading
          bankNameList: [], // 列表
             }
     }
  methods: {
  onBankNameChange (val) {
    
    },
    doSearchBankNameList (value) {
      this.bankNameList = []
      this.fetching = true
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      apiAction({
        name: value
      }).then((res) => {
        if (fetchId !== this.lastFetchId) { // for fetch callback order
          return
        }
        this.fetching = false
        this.bankNameList = res.data || []
      }).catch(() => {
        this.bankNameList = []
        this.fetching = false
      })
    }
    }
}

你可能感兴趣的:(ant-design vue select组件实时远程查询接口数据)