iview 的select元件擴充

效果如圖上圖

對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()方法我就不寫了

這裡還需注意,每次選完後,需要將所選的內容放入列表中,不然搜尋查詢後資料會自動過濾未查到資料