element ui的el-tree文字显示不全的解决办法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element ui的el-tree文字显示不全的解决办法
使用element ui的树组件el-tree时,经常出现如下问题:
el-tree渲染时因为文字内容长度不一致,导致过长的文字无法显示完全。
经尝试发现如下三种解决方法,推荐方法三。
方法一: 最简单的设置横向滚动条
效果:
在当前树节点的span标签上设置样式
overflow: auto;
// 或者
overflow-x: auto;
问题:
因为只有在最内层span层设置overflow时,能有效控制超出部分的显示,导致多个文字超长部分都有横向滚动条出现,有点丑。即便是在上一层label层添加overflow一样还是丑。所以问题等于没解决。下一个
方法二: 添加拖拽条改变外层容器宽度
详见另一篇文章:
https://blog.csdn.net/Beam007/article/details/119823933
问题:
办法是好办法,就是有点麻烦,我只是想要简单的显示完全不想拖来拖去怎么办?下一个
方法三: 通过…表示 鼠标移上去显示全称
效果:
过程:
遇到问题首先想到的就是这个解决办法,无奈绕了很多弯路才走上正道。
因为element ui官方el-tree文档里没有给节点插入title标签的说明,于是我打开源码在其对应节点的span标签强制写上title="node.name"之类的并没有任何用处。
直到看到自定义节点内容,虽然官方举例用来插入和删除节点,但是我可以把点击事件变成悬浮事件显示节点文本全内容啊。
然后选用scoped slot插入的时候发现:
最后终于结束了这个问题。
代码:
使用el-tree组件如下:
<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true" :node-key="nodeId">
<span class="span-ellipsis" slot-scope="{ node, data }">
<span :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
给span标签添加样式,通过…表示文本未完全显示:
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
补充说明:
如果.span-ellipsis样式设置无效,可能需要加上display: block;即为:
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
因为我用element ui的el-tree组件,span的外层样式默认为display: flex; 则无需设置span的display属性即可。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
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 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)