废话不多说直接上效果🧐
<template><div><el-form:model="params"ref="queryForm"size="small":inline="true"label-width="68px"><el-form-item label="标签" prop="tag"><el-inputv-model="inputContent"clearablereadonly><template slot="prefix"><el-tag slot="prepend" type="info" size="small" v-if="checkboxGroup.length>=1" closable @close="handleClose(checkboxGroup[0])">{{ checkboxGroup[0] }}</el-tag><el-tag slot="prepend" type="info" size="small" v-if="checkboxGroup.length>1">+{{ checkboxGroup.length-1 }}</el-tag></template><template slot="suffix"><i class="el-input__icon el-icon-menu" @click="openTags"></i></template></el-input></el-form-item></el-form><el-dialog title="选择标签" :visible.sync="tagsDialog" width="824px" append-to-body><div class="select"><div class="title">已选择标签：</div><el-tag:key="tag"v-for="tag in checkboxGroup"closable:disable-transitions="false"@close="handleClose(tag)"effect="plain">{{tag}}</el-tag></div><el-divider></el-divider><el-checkbox-group v-model="checkboxGroup"><el-checkbox v-for="item in dynamicTags" :key="item" :label="item" border></el-checkbox></el-checkbox-group><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitTags">确 定</el-button><el-button @click="tagsDialog = false">取 消</el-button></div></el-dialog></div>
</template><script>
export default {name: 'InputCheckbox',data() {return {params: {tag: [],},inputContent: '',tagsDialog:false,checkboxGroup:[],dynamicTags: ['标签一', '标签二', '标签三','标签四'],};},computed: { // 计算并设置输入框的显示值formattedDisplayValue() {if(!this.checkboxGroup.length) return;return this.checkboxGroup.length >= 1 ? `${this.checkboxGroup.slice(0, 1).join(', ')} +${this.checkboxGroup.length - 1}`:this.checkboxGroup[0];},},watch:{checkboxGroup(){this.params.tag = this.formattedDisplayValue;}},methods: {openTags(){this.tagsDialog = true;},submitTags(){this.tagsDialog = false;},handleClose(tag) {this.checkboxGroup.splice(this.checkboxGroup.indexOf(tag), 1);},},
};
</script><style lang="scss" scoped>
::v-deep .el-checkbox{margin-right: 0;
}
.el-tag + .el-tag {margin-left: 10px;
}
.el-input__icon{cursor: pointer;
}
.select{.title{margin-bottom: 10px;}
}
</style>
