el-select多选修改默认显示一个

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

效果

备忘一下

代码

父组件

<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 : 7
                            avaliableTagWidth += 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 : 7
                            avaliableTagWidth += 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>