需求：超出选择框已数字展示

效果

备忘一下

代码

父组件

<template><div><div class="credit_box"><div class="credit_select_box"><div class="credit_select"><span>选择框1</span><div style="width:42%" class="gequan"><select-tags v-model="value1" style="margin-left:8px" :options="options" class="select-tags"></select-tags></div><span style="margin-left:20px">选择框2</span><div style="width:42%" class="fund"><select-tags1 v-model="value2" style="margin-left:8px" :options="options2"class="select-tags1"></select-tags1></div></div><div></div></div></div></div>
</template><script>
import selectTags from './components/select.vue'   //一个会错乱
import selectTags1 from './components/select1.vue'
export default {components: {selectTags,selectTags1},data() {return {options: [{value: '选项1',label: '黄金糕黄金糕黄金糕'}, {value: '选项2',label: '双皮奶黄金糕黄金糕'}, {value: '选项3',label: '蚵仔煎黄金糕黄金糕北京烤鸭黄金糕黄金糕'}, {value: '选项4',label: '龙须面黄金糕黄金糕北京烤鸭黄金糕黄金糕'}, {value: '选项5',label: '北京烤鸭黄金糕黄金糕'}],options2: [{value: '选项1',label: '黄金糕黄金糕黄金糕'}, {value: '选项2',label: '双皮奶黄金糕黄金糕'}, {value: '选项3',label: '蚵仔煎黄金糕黄金糕北京烤鸭黄金糕黄金糕'}, {value: '选项4',label: '龙须面黄金糕黄金糕北京烤鸭黄金糕黄金糕'}, {value: '选项5',label: '北京烤鸭黄金糕黄金糕'}],value1: [],value2: [],}},methods: {}
}
</script><style lang="scss" scoped>
.credit_box {margin: 0 20px;background: #FFF;border: 1px solid #D4D8E5;stroke: #D4D8E5;filter: drop-shadow(0px 0px 8px rgba(224, 223, 238, 0.40));.credit_select_box {.credit_select {display: flex;align-items: center;margin-top: 100px;margin-left: 20px;margin-bottom: 100px;}}
}
</style>

子组件1

<template><el-select v-model="values" size="small" multiple style="width:100%" placeholder="请选择" @change="handleChange"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
</template><script>
var observer = null
export default {props: {options: {type: Array,default: () => []},value: {type: Array,default: () => []}},data() {return {};},mounted() {let tagLIstDom = document.querySelector(".gequan .el-select__tags");//   需要加上组件自定义的类名，防止监听失效let tagSpanDom = document.querySelector(".gequan .select-tags .el-select__tags > span");let hideDom = document.createElement("span");hideDom.classList = ["count-node"]; //设置样式tagSpanDom.append(hideDom); //插入到span中var config = { childList: true };// 当观察到突变时执行的回调函数var callback = function (mutationsList) {mutationsList.forEach(function (item, index) {if (item.type == "childList") {let tagList = item.target.childNodes;let tagWidth = 0; //标签总宽度let tagNum = 0; //标签多余个数let avaliableTagWidth = 0 //显示标签的总宽度for (let i = 0; i < tagList.length; i++) {const e = tagList[i];if (tagWidth > tagLIstDom.offsetWidth) {e.style.display = "none"; //隐藏多余标签} else {e.style.display = "inline-block"; //显示标签}tagWidth += e.offsetWidth + 5;if (tagWidth > tagLIstDom.offsetWidth) {e.style.display = "none"; //隐藏多余标签} else {e.style.display = "inline-block"; //显示标签}if (e.style.display != "none") {tagNum++;hideDom.style.display = "none"; //隐藏多余标签个数const margin = tagNum === 1 ? 0 : 7avaliableTagWidth += e.offsetWidth + margin} else {hideDom.style.display = "inline-block"; //显示多余标签个数// hideDom.style.left = `${avaliableTagWidth}px` //数字标签的位置设置hideDom.innerHTML = `+${tagList.length - tagNum}`;  //显示多余标签个数}}}});};// 创建一个链接到回调函数的观察者实例observer = new MutationObserver(callback);// 开始观察已配置突变的目标节点observer.observe(tagSpanDom, config);// 随后，您还可以停止观察// observer.disconnect();},methods: {handleChange() {this.$emit("change", this.value);}},computed: {values: {get() {return this.value;},set(val) {this.$emit("input", val);}}},//销毁时beforeDestroy() {// 停止观察observer.disconnect();}
};
</script>
<style>
.count-node {position: absolute;right: 0;/* top: 2px; */display: none;height: 24px;padding: 0 8px;line-height: 22px;margin-left: 61px;background-color: #f4f4f5;border: 1px solid #e9e9eb;border-radius: 4px;color: #909399;font-size: 12px;box-sizing: border-box;
}
</style>

子组件2

<template><el-select v-model="values" size="small" multiple style="width:100%" placeholder="请选择" @change="handleChange"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
</template><script>
var observer = null
export default {props: {options: {type: Array,default: () => []},value: {type: Array,default: () => []}},data() {return {};},mounted() {let tagLIstDom = document.querySelector(".fund .el-select__tags");//   需要加上组件自定义的类名，防止监听失效let tagSpanDom = document.querySelector(".fund .select-tags1 .el-select__tags > span");let hideDom = document.createElement("span");hideDom.classList = ["count-node1"]; //设置样式tagSpanDom.append(hideDom); //插入到span中var config = { childList: true };// 当观察到突变时执行的回调函数var callback = function (mutationsList) {mutationsList.forEach(function (item, index) {if (item.type == "childList") {let tagList = item.target.childNodes;let tagWidth = 0; //标签总宽度let tagNum = 0; //标签多余个数let avaliableTagWidth = 0 //显示标签的总宽度for (let i = 0; i < tagList.length; i++) {const e = tagList[i];if (tagWidth > tagLIstDom.offsetWidth) {e.style.display = "none"; //隐藏多余标签} else {e.style.display = "inline-block"; //显示标签}tagWidth += e.offsetWidth + 5;if (tagWidth > tagLIstDom.offsetWidth) {e.style.display = "none"; //隐藏多余标签} else {e.style.display = "inline-block"; //显示标签}if (e.style.display != "none") {tagNum++;hideDom.style.display = "none"; //隐藏多余标签个数const margin = tagNum === 1 ? 0 : 7avaliableTagWidth += e.offsetWidth + margin} else {hideDom.style.display = "inline-block"; //显示多余标签个数// hideDom.style.left = `${avaliableTagWidth}px` //数字标签的位置设置hideDom.innerHTML = `+${tagList.length - tagNum}`;  //显示多余标签个数}}}});};// 创建一个链接到回调函数的观察者实例observer = new MutationObserver(callback);// 开始观察已配置突变的目标节点observer.observe(tagSpanDom, config);// 随后，您还可以停止观察// observer.disconnect();},methods: {handleChange() {this.$emit("change", this.value);}},computed: {values: {get() {return this.value;},set(val) {this.$emit("input", val);}}},//销毁时beforeDestroy() {// 停止观察observer.disconnect();}
};
</script>
<style>
.count-node1 {position: absolute;right: 0;/* top: 2px; */display: none;height: 24px;padding: 0 8px;line-height: 22px;margin-left: 61px;background-color: #f4f4f5;border: 1px solid #e9e9eb;border-radius: 4px;color: #909399;font-size: 12px;box-sizing: border-box;
}
</style>