效果如图上图
对iview的select进行拓展
代码如下
<Row>
<FormItem label="部门" prop="departments" style="position:relative;">
<!-- 修改 -->
<Select placeholder="请输入部门" class="bandelete" v-if="!modal.isread" v-model="model.departments" ref="setQuery" filterable remote @on-change="deletedata" @on-clear="remoteMethod" :remote-method="remoteMethod" multiple transfer clearable>
<Option v-for="(option, index) in modal.perm" :value="option.code" :key="index">{{option.name}}</Option>
</Select>
<span v-if="modal.isread">{{newDepartmentsnamestring}}</span>
</FormItem>
<FormItem style="position:relative;margin-bottom:0px;" v-if="model.departments.length>0 && !modal.isread">
<!-- 修改 -->
<div slot="label">
<Tooltip :transfer="true" content="勾选后该部门就能查看该类别下所有的名单" placement="bottom-start">
<span style="font-size: 12px;font-weight:bold">
<Icon class="ivu-icon ivu-icon-ios-information-circle" slot="icon" color="#A1A1A1" style="font-size:14px;cursor:pointer;"></Icon>
</span>
</Tooltip>
</div>
<div style="border:1px solid #dcdee2;padding:16px;" class="checkclass" >
<CheckboxGroup v-model="model.maindepartments" @on-change="getisall()">
<div v-for="(option, index) in savecoorddepartment" v-if="model.departments.includes(option.code)" style="width:50%;display:inline-block;position:relative;">
<Checkbox style="line-height: 19px;margin-right:-6px;" :key="index" :label="option.code">{{option.name}}</Checkbox>
<i class="ivu-icon ivu-icon-ios-close" style="font-size:19px;vertical-align:top;margin-right:4px;cursor:pointer;position:absolute;" @click="deletecurrent(option.code)"></i>
</div>
</CheckboxGroup>
</div>
</FormItem>
</Row>
deletedata:function(val){
let allselectdepartment = val;
let indepartment = [];
if(allselectdepartment.length>0){
let maindepartments = [...this.model.maindepartments];
if(maindepartments.length>0){
maindepartments.map(item=>{
if(allselectdepartment.includes(item)){
indepartment.push(item);
}
})
}
this.model.maindepartments = indepartment;
allselectdepartment.map(alitem=>{
let hasexict = this.savecoorddepartment.find(item=>{
return item.code == alitem
})
if(!hasexict){
let hasdepartment = this.modal.perm.find(item=>{
return item.code == alitem
})
if(hasdepartment){
this.savecoorddepartment.push(hasdepartment);
}
}
})
}else{
this.model.maindepartments = [];
this.savecoorddepartment = [];
}
},
deletecurrent:function(code){
let _this = this;
let maindepartments = _this.model.maindepartments;
let departments = [..._this.model.departments];
let newmaindepartments = [];
let newdepartments = [];
if(maindepartments.length>0){
maindepartments.map(item=>{
if(item != code){
newmaindepartments.push(item);
}
})
if(newmaindepartments.length>0){
_this.model.maindepartments = newmaindepartments;
}else{
_this.model.maindepartments = [];
}
}else{
_this.model.maindepartments = [];
}
if(departments.length>0){
departments.map(item=>{
if(item != code){
newdepartments.push(item);
}
})
if(newdepartments.length>0){
_this.model.departments = newdepartments;
}else{
_this.model.departments = [];
}
}else{
_this.model.departments = [];
}
}
获取查询数据列表的remoteMethod()方法我就不写了
这里还需注意,每次选完后,需要将所选的内容放入列表中,不然搜索查询后数据会自动过滤未查到数据