用iview 寫 帶分頁的下拉框

需求

 

 

 Html部分

<Select
  v-model="name"
  clearable
  filterable
  @on-change="onChangeName"
  class="content_select2"
>
  <Option v-for="item in nameList" :value="item.id" :key="item.id">{{ item.name }}</Option>
  <Page
    :total="totalName"
    size="small"
    show-total
    :page-size="pageSizeName"
    :current="currentPageName"
    @on-change="handlePageName"
  />
</Select>

js部分

data() {
  return {
    name: '',
    nameList: [], // 機構列表
    totalName: 0, // 機構總數
    pageSizeName: 10, // 機構分頁
    currentPageName: 1 // 機構分頁
  }
},
methods: {
  onChangeType (val) {
    this.typeData = val
    this.handlePageName(1)
  },
  async handlePageName (val) {
    // 掉接口
    const { data, count } = await organizationController.cooperativeOrgani.getCooperative({
      type: this.typeData,
      pageSize: this.pageSizeName,
      pageNum: val
    })
    if (data) {
      this.nameList = data || []
      this.totalName = count
    } else {
      this.nameList = []
      this.totalName = 0
    }
  },
}

就是把下拉框里面加了個分頁，很簡單的東西