el-select多选以tag展示时，超过显示长度以...省略号显示

这里记录一个样式问题，我们知道element-ui给我们提供了多选时的tag形式展示，但是当tag标签过长时，会出现“溢出”的情况；

注意：① 一个tag文字过长需要溢出隐藏，超出部分… 显示
② 多个tag卡片溢出隐藏，超出部分…显示

比如我在设置第一个之后，第二个框要把上面那个禁止掉，多选的时候，需要对样式设置一下；

下面直接上代码：

模板文件代码如下：

<el-form-item label="应用Id" prop="client_id">
            <el-autocomplete
              v-model="temp.client_id"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              clearable
              @select="handleSelect"
              @blur="selectBlur($event)"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="授权应用" prop="client_ids">
            <el-select v-model="temp.client_ids" multiple collapse-tags style="width:223px;" placeholder="请选择">
              <el-option
                v-for="item in clientOptions"
                :key="item.value"
                :label="item.label"
                :disabled="item.disabled"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

 js代码如下：

export default {
  name:'UserRoleList',
    data() {
        return {
         
          rules: {
                client_id: [{ required: true, message: '客户端Id不能为空', trigger: 'change' }],
                client_ids: [{ required: true, message: '授权客户端不能为空', trigger: 'change' }],
          },
          temp: {
                id: undefined,
                client_id: '',
                client_ids: '',
              
          },
          timeout:  null,
          restaurants: [],
          clientOptions: []，
        }
    },
    created() {
    },
    mounted() {
         this.loadAll()
    },
    methods: {
     
       loadAll() {
           getClientId({}).then(response => {
               let options = response.data.items
               //设置多选下拉框
               this.setClientOptions(options)

               //处理单选下拉框的格式
               let formatOption = []
               options.forEach((item) => {
                   formatOption.push({
                       'value': item.name,
                   })
               })
               this.restaurants =  formatOption
           })
        },
        setClientOptions(options){
           if(options){
               options.forEach((item, index) => {
                   this.clientOptions.push({
                       'value': item.clientId,
                       'label': item.name,
                       'disabled': false,
                   })
               })
           }

         },
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 50 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(val) {
            if(!this.clientOptions) return
            //重置
            this.resetClientOptions()
            //在下拉多选框中过滤已经前一个下拉框选中的值
            this.clientOptions.forEach((item) => {
                if(val.value == item.label) {
                    item.disabled = true
                }

                //搜索值对应的名称
                let name = this.searchNameByclientOptions(val)
                //如果当前单选的在下拉多选中那么移除
                this.temp.client_ids.forEach((item2, index) => {
                     if(item2 == name){
                         this.temp.client_ids.splice(index, 1)
                     }
                })
            })
        },
        searchNameByclientOptions(val){
            let name = ''
            this.clientOptions.forEach((item) => {
                console.log(val.value, item.value, 8888)
                if(val.value == item.label) {
                    name = item.value
                }
            })
            return name
        },
        selectBlur(val){ //失去焦点如果下拉框的值为空，重置多选框
             if(!this.temp.client_id || this.temp.client_id == undefined) {
                 //重置
                 this.resetClientOptions()
             }
         },
        resetClientOptions(){
            this.clientOptions.forEach((item) => {
                item.disabled = false
            })
        }
    }
}

css样式设置如下：

<style lang="less" scoped>
  .el-select__tags-text {
    display: inline-block;
    max-width: 190px;
    @media (max-width: 1400px) {
      max-width: 42px;
    }
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .el-select .el-tag__close.el-icon-close {
    top: -7px;
    right: -4px;
  }
</style>

记得一定要设置：collapse-tags属性，这样就可以调整多选下拉框样式不会外溢了。