iview select清空选择,iview中select组件使用总结

1.使用iview的select组件进行远程搜索

远程搜索需同时设置 filterable、remote、remote-method、loading 四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。

注意：需要给 Option 设置 key。

设置初始显示值，需设置 label 属性。

页面代码：

{{item.userName}}

参数值：

export default{

data () {return{

userInfo: {

userId:''},

userList: [],

loading2:false}

}

}

远程搜索的方法：

remoteMethod2 (query) {

let self= this

if(query) {

self.loading2= truelet 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 是不能够实现的。

{{item.departmentName}}

{{item.userName}}

(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

})

})

},