el-select 改造

1.选择内容多时一行显示，溢出部分'...'，样式修改。

.el-select {
   /deep/.el-select__tags {
     // 解决多个tag卡片溢出隐藏问题
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     .el-tag {
       // 注意这个inline-block 对卡片溢出隐藏很重要
       display: inline-block;
       // 解决单个tag文字过长溢出隐藏问题
       .el-select__tags-text {
         display: inline-block;
         max-width: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .el-icon-close {
         top: -6px;
         right: -4px;
       }
     }
   }
 }

2.默认选中（defaultSelect数组）的不能修改，在main.js文件自定义指令

Vue.directive('defaultSelect', {
  componentUpdated (el, bindings) {
    const defaultValues = bindings.value //获取设置的不可编辑默认值
    console.log(defaultValues)
    // 将默认值的close图标隐藏掉
    const dealStyle = (tags) => {
      //循环将默认值数量的 close 图标隐藏
      tags.forEach((el, index) => {
        if (
          index <= defaultValues.length - 1 &&
          ![...el.classList].includes('select-tag-close-none')
        ) {
          el.style.display = 'none' // close 图标隐藏掉
        }
      })
    }
    // 隐藏 el-tag__close
    const tags = el.querySelectorAll('.el-tag__close')
    if (tags.length === 0) {
      setTimeout(() => {
        const tagTemp = el.querySelectorAll('.el-tag__close')
        dealStyle(tagTemp)
      })
    } else {
      dealStyle(tags)
    }
  }
})

3.组件使用

   <el-select
                  v-defaultSelect="defaultSelect"
                  v-model="basicInfo.buildCompanyName"
                  multiple
                  placeholder="请选择">
                  <el-option
                    :disabled="disabledBuildUint(item)" // 不能修改
                    v-for="item in buildCompanyNameptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>