vue element 下拉框内容过长显示...鼠标悬浮显示全部
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/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;
}
});
},
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)