項(xiàng)目中經(jīng)常用到<el-select>標(biāo)簽攘须，但是element的select有一個(gè)樣式上的小問(wèn)題，就是前端經(jīng)常需要對(duì)輸入框/選擇框的樣式寬度做限制以保證頁(yè)面整潔殴泰，布局清晰于宙。但是如果選項(xiàng)(option)的長(zhǎng)度在大于選擇框的情況時(shí)，就會(huì)出現(xiàn)以下問(wèn)題
image.png
其實(shí)這個(gè)問(wèn)題可以直接通過(guò)修改樣式就可以解決了悍汛，只需要在el-select標(biāo)簽上添加一個(gè)class捞魁，并修改el-tag與el-tag--info的樣式就可以了，具體如下
// idt-multiple-select 為el-select上的className
/deep/ .idt-multiple-select {
.el-tag {
height: auto;
max-width: 100%;
}
.el-tag--info {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
但是我真的很懶离咐，項(xiàng)目至少有6-7處需要用到這個(gè)樣式谱俭，直接復(fù)制粘貼又影響我的逼格。所以我索性就修改了一下宵蛀，對(duì)el-select進(jìn)行二次封裝昆著，主要代碼如下：
<template>
<div>
<el-select :placeholder="placeholder"
:value="value"
:size="size"
multiple
class="idt-multiple-select"
@input="change($event)">
<el-option v-for="item in optionsList"
:key="item[id]"
:label="item[name]"
:value="item[id]"></el-option>
</el-select>
</div>
</template>
<script>
export default {
props: {
name: {
default: 'name',
type: String
},
id: {
default: 'id',
type: String
},
placeholder: {
default: '請(qǐng)選擇',
type: String
},
size: {
default: 'small',
type: String
},
filterable: {
default: false,
type: Boolean
},
value: {
default: () => {
return []
},
type: Array
},
optionsList: {
default: () => {
return []
},
type: Array
}
},
methods: {
change: function(val) {
this.$emit('input', val)
}
}
}
</script>
<style lang="less" scoped>
/deep/ .idt-multiple-select {
.el-tag {
height: auto;
max-width: 100%;
}
.el-tag--info {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
}
</style>
在外層使用的時(shí)候，只需要引入該組件术陶，傳部分需要改動(dòng)的值即可
<idt-multiple-select v-model="formData.projectIdList"
:filterable="true"
:options-list="projectTagList"></idt-multiple-select>
效果如下：
image.png
當(dāng)然這并不是完整的凑懂，el-select還有很多方法這里就沒(méi)有加進(jìn)去，以后加進(jìn)去也是可以的梧宫，但是目前項(xiàng)目用不上接谨，而且我真的很懶，手上還有很多其他的工作需要趕塘匣，我在這里就不補(bǔ)全了疤坝。以后哪天有需要會(huì)回來(lái)更新的~
