vue element 下拉框内容过长显示...鼠标悬浮显示全部

 

 

 

 

1.1. css  多选下拉框  内容过长-用...代替

/*下拉选择框-多选-内容过长-用...代替    begin    */
.el-tag.el-tag--info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
    max-width: calc(100% - 50px);
    /* white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;*/
}
.el-tag.el-tag--info:nth-child(1) {
    width: calc(100% - 50px);
}
.el-tag.el-tag--info:nth-child(1) .el-select__tags-text{
    width: calc(100% - 20px);
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/*下拉选择框-多选-内容过长-用...代替    end    */

1.2. 多选下拉框  文本先死过长时候、，显示tooltip.否则不显示。

<el-tooltip class="item" effect="dark" :disabled="ParamNameTooltipDisabled" :content="selectParamName.join(',')||'请选择'" placement="top-start">
                                            <el-select v-model="selectParam" placeholder="请选择" size="mini" multiple collapse-tags clearable  class="float_r selectParamName" style="width: 280px;" @change="selectParam_change">
                                                <el-option
                                                        v-for="item in selectParamOptions"
                                                        :key="item.msbcsbm"
                                                        :label="item.msbcsmc"
                                                        :value="item.msbcsbm">
                                                </el-option>
                                            </el-select>
                                        </el-tooltip>




 watch: {
            'selectParamName': function(newVal,oldVal,event){
                let that = this;
                this.$nextTick(function (){
                    if(newVal.length>1){
                        that.ParamNameTooltipDisabled = false;
                    }else{
                        var obj2 = $(".selectParamName .el-tag.el-tag--info:nth-child(1) .el-select__tags-text").get(0);
                        if(typeof(obj2)!="undefined"){
                            that.ParamNameTooltipDisabled = obj2.scrollWidth<=obj2.offsetWidth;
                        }else {
                            that.ParamNameTooltipDisabled = true;
                        }
                    }

                });
            },
}

2. 单选下拉框  文本先死过长时候、，显示tooltip.否则不显示。

watch: {
  'selectReportName': function(newVal,oldVal,event){
                let that = this;
                this.$nextTick(function (){
                    var obj2 = $(".selectReportName .el-input__inner").get(0);
                    if(typeof(obj2)!="undefined"){
                        if(obj2.scrollWidth<=obj2.offsetWidth){
                            that.ReportNameTooltipDisabled = true;
                        }else{
                            obj2.value=obj2.value.substring(0,20)+'...';
                            that.ReportNameTooltipDisabled = false;
                        }
                    }else {
                        that.ReportNameTooltipDisabled = true;
                    }

                });
            },
}