image.png

网上搜了很多文章，几乎都是单独设置el-select__tags-text的max-width，如果页面有很多不同宽度的el-select就比较麻烦了，下面是通过refs对不同的el-select的max-width进行修改

    <el-select v-model="form.operation_center" size="small" style="width: 200px;" clearable filterable multiple collapse-tags ref="tags_oc" @change="selectChange($event, 'tags_oc')">
        <el-option v-for="item in operationCenterOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>


    methods: {
        selectChange(val, refName) {
            if (Object.prototype.toString.call(val) === '[object Array]') {
                let eleWidth = this.$refs[refName].$el.style.width.slice(0, -2)
                this.$nextTick(() => {
                    let tags = this.$refs[refName].$el.querySelectorAll('.el-tag.el-tag--info .el-select__tags-text')
                    let maxWidth = ''
                    if (tags.length > 1) {
                        maxWidth = Number(eleWidth) * 0.4 + 'px'
                    } else {
                        maxWidth = Number(eleWidth) * 0.6 + 'px'
                    }
                    tags.forEach(node => {
                        node.style.maxWidth = maxWidth
                    })
                })
            }
        }
    }
    
<style lang="scss" scoped>
::v-deep .el-select {
    width: 100%;
    .el-select__tags {
        white-space: nowrap;
        overflow: hidden;
        flex-wrap: nowrap;
        .el-select__tags-text {
            display: inline-block;
            // max-width: var(--tagsWidth);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>