Vue2.x-05 iview的Select控件点击从后台加载数据

文章目录

• 概述
• 知识点
• 实现

概述

先看下效果

---

知识点

Vue2 iviewui

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

---

实现

代码语言：javascript复制

  <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">

代码语言：javascript复制

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

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

function 后台

0 人点赞