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