Element里Select选择器多选器选项内容过长样式处理

一、问题引入

大家使用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
      }

最后得到开始想要的效果。

最最后，谢谢将分享看到最后！欢迎指教我。