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