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

最新推荐文章于 2024-07-11 14:54:15 发布

是炎炎哦（谁的小马甲）

最新推荐文章于 2024-07-11 14:54:15 发布

阅读量680

点赞数 1

文章标签： vue.js javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45650440/article/details/121516486

版权

本文介绍了如何使用Vue.js开发一个带有动态选择框的组件，用户可以多选人员，并在选中后实时同步到显示区域。通过`v-model`和`@on-change`事件处理，实现实时数据绑定和清除。同时展示了删除选中人员的逻辑，以及调整了样式以确保标签对齐。

摘要由CSDN通过智能技术生成

需求：显示选中的人员

//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; */
}