element-ui el-tree 文本超出显示省略号 添加移入提示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
具体代码
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpandedKeys"
ref="tree"
:default-expand-all="isExpandAll"
:highlight-current="true"
@node-click="handleNodeClick"
node-key="id"
>
<el-tooltip
:disabled="showTitle"
effect="dark"
:content="tooltipTitle"
placement="top"
slot-scope="{ node, data }"
>
<span
class="span-ellipsis"
@mouseover="onShowNameTipsMouseenter"
>{{ node.label }}</span
>
</el-tooltip>
</el-tree>
data(){
return{
tooltipTitle: "",
showTitle: true,
}
},
methods:{
onShowNameTipsMouseenter(e) {
var target = e.target;
let textLength = target.clientWidth;
let containerLength = target.scrollWidth;
if (textLength < containerLength) {
this.tooltipTitle = e.target.innerText;
this.showTitle = false;
} else {
this.showTitle = true;
}
}
}
<style>
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 20px;
}
</style>
详解:
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpandedKeys"
ref="tree"
:default-expand-all="isExpandAll"
:highlight-current="true"
@node-click="handleNodeClick"
node-key="id"
>
<el-tooltip
:disabled="showTitle" //判断是否显示tooltip
effect="dark"
:content="tooltipTitle" //移入提示内容
placement="top"
slot-scope="{ node, data }"
>
<span
class="span-ellipsis" //设置超出样式、添加省略号
@mouseover="onShowNameTipsMouseenter" //移入方法 判断当前文本是否超出
>{{ node.label }}</span
>
</el-tooltip>
</el-tree>
data(){
return{
tooltipTitle: "",
showTitle: true,
}
},
methods:{
onShowNameTipsMouseenter(e) {
var target = e.target;
let textLength = target.clientWidth;
let containerLength = target.scrollWidth;
if (textLength < containerLength) {
this.tooltipTitle = e.target.innerText;
this.showTitle = false;
} else {
this.showTitle = true;
}
}
}
<style>
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 20px;
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)