1.使用iview的select元件進行遠端搜尋

遠端搜尋需同時設定 filterable、remote、remote-method、loading 四個 props，其中 loading 用於控制是否正在搜尋中，remote-method 是遠端搜尋的方法。

注意：需要給 Option 設定 key。

設定初始顯示值，需設定 label 屬性。

頁面程式碼：

<FormItem label="選擇使用者">
    <Select v-model="userInfo.userId" filterable clearable remote :remote-method="remoteMethod2" :loading
 
="loading2" style="width: 200px">
        <Option v-for="item in userList" :value="item.userId" :key="item.userId">{{item.userName}}</Option>
    </Select>      </FormItem>

引數值：

export default {
  data () {
    return {
      userInfo: {
        userId: ''
      },
      userList: [],
      loading2: 
 
false
    }
  }
}

遠端搜尋的方法：

remoteMethod2 (query) {
      let self = this
      if (query) {
        self.loading2 = true
        let params = {
          name: query
        }
        this.$api.getUserList(params).then(function (res) {
          if (res.meta.success) {
            this.userList= res.data
          } 
 
else {
            this.$Message.error(res.meta.message)
          }
        })
        this.loading2 = false
      }                                       

2.兩個聯動select清空內容

我想要的效果是，當第一個select呼叫介面時清空第二個select，重新賦值第二個select，使用設定 null 是不能夠實現的。

<FormItem label="選擇部門">
    <Select v-model="department.departmentId" @on-change="selectUserBydepartmentId" style="width: 270px">
        <Option v-for="item in departmentList" :value="item.departmentId" :key="item.departmentId">{{item.departmentName}}</Option>
    </Select>
</FormItem>
<FormItem label="選擇使用者">
    <Select v-bind:disabled="isAble" v-model="userInfo.userId" clearable filterable @on-query-change="checkUserInfo" style="width: 270px" ref="store">
        <Option v-for="item in userList" :value="item.userId" :key="item.userId">{{item.userName}}</Option>
    </Select>
</FormItem>

（1）為搜尋框賦值的方法

checkSupplierInfo (query) {
    this.userInfo.searchText = query
},

（2）選擇部門呼叫的介面時清空使用者select值

clearSingleSelect：清空單選項，僅在 clearable="true" 時有效

實現方式是為要清空的select設定ref="store"，通過this.$refs.store.clearSingleSelect()實現清空操作

selectSupplierByOrgId (val) {
      // 清空select繫結值
      this.$refs.store.clearSingleSelect()
      // 根據部門id查詢使用者
      let das = {
        departmentId: val
      }
      this.$api.queryUserListByDepartmentId(das).then(res => {
        if (res.meta.success) {
          this.userList= res.data.userList
          if (this.userList.length > 0) {
            this.isAble = false   // v-bind:disabled="isAble"設定select禁用啟用
          } else {
            this.isAble = true
          }
        } else {
          this.$Message.error(res.meta.message)
        }
      }).catch(err => {
        this.$Modal.error({
          title: '使用者獲取失敗',
          content: err
        })
      })
    },