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>
