一、问题引入
大家使用Select选择器多选的时候是否遇到如下问题:
入下图,当选项内容过长的时候咱们的:tag、el-option、el-input样式是崩的,所以要怎么处理将他美化下呢
美化方法很多,我这里分享一种超级简单的处理方法,也是我干了半年的前端能够分享出来的处理方法。将它做成下面的样子(tag限宽多余内容...隐藏,多个tag合并成一段文字用title展示内容详情,el-option限宽度多余的也用...隐藏),是不是好看点。二、问题处理
首先使用Select Attributes中的collapse-tags将它们合并为一段文字,效果入官方文档的实例(如下图)
然后将el-option过长的显示截断隐藏用...代替显示,代码如下:
1、将自定义的样式插入el-option的 slot 中,并给title让内容全部展示。
<span style="float: left; width:250px; overflow: hidden; text-overflow:ellipsis" :title="item.adviceName">{{ item.adviceName }}</span>
效果如下图
2、现在需要处理tag的样式,只需要deep它原本的样式即可。
/deep/.el-select__tags-text {
display: inline-block;
width: 80px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/deep/.el-tag__close.el-icon-close{
margin-bottom: 10px;
}
到这里样式已经全部调整完毕,效果如下图
3、这会是最后一步了,给tag加上title将内容悬停展示。
这里使用v-model绑定的是数据的Id,title就不能直接绑定显示Name,所以要将选中Id传进方法里,将每一个Id与数组中Id匹配,匹配得上的Id的Name拿到用于title展示,如下:
:title="medicalOrderNameTitle(form.adviceId)"
最后把传入的Id数组中的每一项与数组中的每一项的Id匹配,把符合的Name push进一个新的数组,将新数组return出去就大功告成了,如下图:
medicalOrderNameTitle(adviceId) {
const adviceName = []
const medicalOrderOptions = this.medicalOrderOptions
if (adviceId) {
for (let i = 0, len = adviceId.length; i < len; i++) {
for (let n = 0, lens = medicalOrderOptions.length; n < lens; n++) {
if (adviceId[i] === medicalOrderOptions[n].adviceId) {
adviceName.push(medicalOrderOptions[n].adviceName)
}
}
}
}
return adviceName
}