【增加功能】select下拉多选 显示选中的人员

• 需求：显示选中的人员

//html
                             <div class="formItem">
                                <label>{
    {
     $t("100046") }}：</label>
                                <Select 
                                    @on-change="selectchange"
                                    v-model="adddata.designee"
                                    label-in-value
                                    filter-by-label
                                    :max-tag-count="0"
                                    :max-tag-placeholder="maxTagPlaceholder"
                                    multiple
                                    clearable
                                    filterable
                                    class="searchSelect"
                                >
                                    <Option
                                        style="width:240px"
                                        v-for="item in userList"
                                        :value="item.id"
                                        :key="item.id"
                                        :label="item.sectiontitle + '-' + item.name + '(' + item.work_code + ')'"
                                        ></Option
                                    >
                                </Select>
                            </div>
                            <br>
                            //显示选中的人员
                            <div class="selectPart">
                                <label>
                                    已选人员：
                                </label>
                                <div class="selectPersons">
                                    <div class="ivu-tag ivu-tag-checked"
                                        style=""
                                        v-for=" (item,index) in selectionList"
                                        :key="index">
                                    <span>{
    {
    item.label}}</span>
                                    <i @click="del(item.value)"
                                        class="ivu-icon ivu-icon-ios-close"></i>
                                    </div>
                                </div>
                            </div>


   //js
   methods: {
    
   //选中人员传入this.selectionList
    selectchange (value) {
    
            console.log(value)
            this.selectionList = value
    },
    //在显示人员页面，删除选中人员
    del(val){
    
        console.log(this.selectionList);
         //在传入的所有数据数组 对删除的数据进行过滤
        let {
    designee} = this.adddata;
        designee = designee.filter(item=>item!=val)
        this.adddata={
    
            ...this.adddata,
            designee,
        }
        //选中的数据数组里对删除的数据进行过滤
        this.selectionList = this.selectionList.filter(item=>{
    
            item.value!=val
        })
    },
  }

//解决label与span不对齐 .selectPart{
    
    display:flex;
    align-items:center ;
}

.selectPersons {
    
  width: 300px;
  height: 60px !important;
  font-size: 12px;
  display: inline-block;
  overflow-y: auto;
  /* margin-top: -20px; margin-bottom: -20px; */
}