Vue 多选下拉框+下拉框列表中增加标签

1、效果图

2、代码部分

（1）代码

<el-select class="common-dialog-multiple multipleSelectStyle" @change="clusterListChange" v-model="form.clusterId" placeholder="请先选择" multiple filterable default-first-option :popper-append-to-body="false"><el-option v-for="item in clusterList" :key="item.id" :label="item.name" :value="item.id"><el-checkbox @change="clickTenantBox(item.id)" :value="form.clusterId.includes(item.id)" :label="item.name"><span class="checkbox-label">{{ item.name }}</span><span class="checkbox-tag" v-if="item.alias"><el-tag :type="item.alias=='远程'?'success':''">{{ item.alias }}</el-tag></span></el-checkbox></el-option>
</el-select>

（2）数据定义

clusterList: [{id:1,name: '集群1',alias: '远程',},{id:2,name: '集群2',alias: '别名',},{id:3,name: '集群3',},{id:4,name: '集群4',alias: '远程',},{id:5,name: '集群5',alias: '别名',},{id:6,name: '集群6',},{id:7,name: '集群7',alias: '远程',},{id:8,name: '集群8',alias: '别名',},{id:9,name: '集群9',},
],

（3）方法

clickTenantBox(val) {let values = this.form.clusterId;if (values.includes(val)) {this.form.clusterId = values.filter(n => n !== val);} else {values.push(val);this.form.clusterId = values;}
},
clusterListChange(){console.log(this.form.clusterId)
},

（4）样式

.multipleSelectStyle {.el-select__tags {flex-wrap: unset;overflow: auto;margin-left: 2px;}
}.multipleSelectStyle ::-webkit-scrollbar {display: none;
}.common-dialog-multiple{.el-tag--small{height: 18px;}.el-select-dropdown__list{padding: 5px 13px 5px 8px;}.el-select-dropdown.is-multiple .el-select-dropdown__item{padding-left: 12px;padding-right: 0;border-radius: 2px;height: 32px;line-height: 32px;margin-bottom: 4px;.el-checkbox{width: 100%;.el-checkbox__input.is-checked+.el-checkbox__label{color: #19BBFF !important;font-weight: 600;}.el-checkbox__input{margin-top: -10px;.el-checkbox__inner{border: 1px solid #B0C0C5;}}.el-checkbox__label {width: calc(100% - 15px);height: 32px;.checkbox-label{display: inline-block;//width: calc(100% - 40px);max-width:calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;padding-top: 7px;}.checkbox-tag{float: right;margin-right: 10px;padding-top: 6px;.el-tag {border-radius: 4px;background: #F8B02D14;border: 1px solid #F8B02D99;color: #FFA901;height: 18px;padding: 0 7px;line-height: 18px;font-size: 12px;}.el-tag.el-tag--success {background: #22CE7614;border: 1px solid #22CE7699;color: #2DC86D;}}}}}.el-select-dropdown.is-multiple .el-select-dropdown__item:last-child{margin-bottom: 4px;}.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {background-color: #ecf8fb;color: #19bbff;.el-checkbox{.el-checkbox__input .el-checkbox__inner{border-color: #19BBFF !important;}.el-checkbox__label{color: #19BBFF !important;}}}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {color: #18bbff;background: #fff;.el-checkbox{.el-checkbox__input .el-checkbox__inner{border-color: #19BBFF !important;}.el-checkbox__label{color: #19BBFF !important;font-weight: 600;}}}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{content: none;}
}.el-checkbox__inner::after{transition: transform .0s ease-in .0s,-webkit-transform .0s ease-in .0s !important;
}