概述

先看下效果

知识点

Vue2 + iviewui

http://v2.iviewui.com/components/select

实现

  <Select v-model="chooseResourceObj.equipId"
                          @on-change="equipChange"
                          @on-open-change="(flag)=>{selectOpenChange(flag,'equip')}"
                          filterable
                          remote
                          label-in-value
                          :remote-method="equipQuery"
                          :loading="equipLoading"
                          :transfer="transfer">

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

 // 下拉列表展开事件
      selectOpenChange (flag, queryType) {
        if (flag) {
          if (queryType === 'equip') {
            this.equipQuery('')
          } else if (queryType === 'port') {
            this.portQuery('')
          }
        } else {
          console.log('*****flag=:' + flag)
        }
      }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

selectOpenChange 和 equipQuery 都是自定义的function, equipQuery 中通过localAxios发起后台请求获取数据。

文章来源: artisan.blog.csdn.net，作者：小小工匠，版权归原作者所有，如需转载，请联系作者。

原文链接：artisan.blog.csdn.net/article/details/85080987