iview中select組件使用總結

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 }) }) },