使用Element UI 开发页面遇到的问题之Tree树形结构节点过长显示不完全问题

最新推荐文章于 2024-05-24 19:33:40 发布
最新推荐文章于 2024-05-24 19:33:40 发布
阅读量1w 收藏 18
点赞数 8
文章标签： element UI javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41694829/article/details/90239583
版权

1.Tree树形结构节点过长显示不完全问题

这个问题怎么解决呢，本身element框架里自带的是文字过长直接就隐藏了，但是需求写起来肯定不会这样写，一般情况下我们会选择换行显示，但是我觉得换行不美观，所以选择"…"来显示文字内容没有完全显示，然后鼠标移上去再通过"title"显示出来，话不多说，直接上代码。
1.html格式代码
html和文档里的格式不一样，因为这里是采用的span标签来加载数据，通过设置span标签属性来隐藏超出的内容，为三个点显示
html和文档里的格式不一样，因为这里是采用的span标签来加载数据，通过设置span标签属性来隐藏超出的内容，为三个点显示
2.js代码
第一部分是数据
这部分数据在element开发文档里可以找的到，直接拷贝就可以了
这部分数据在element开发文档里可以找的到，直接拷贝就可以了
方法暂时没有
3.css代码
在这里插入图片描述
好了，有了这几部分，效果就出来了，最终效果图如下：
在这里插入图片描述

missGril
关注
  • 8
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
elementui:el-tree节点文字内容过长时，无法正常显示(已解决)
weixin_32629733的博客
10-26 1万+
最近做项目新接到的前端需求，发生的问题是：在页面左侧的树形节点上，当文字内容过长时，节点内容会超出外部容器无法正常显示，现在的需求是，要求左侧内容栏宽度固定不变，当内部叶子节点的内容超过外部容器时，做省略处理。 处理之前 处理之后 代码如下： <el-tree node-key="0" :props="defaultProps" :load="getTrees" lazy @node-click="nodeClick" ref="resourcesTree"
el-tree 标题文本太长，文字显示不全处理办法
最新发布
weixin_43731788的博客
06-05 226
给span标签添加样式，通过…
Element UI el-tree换行显示
D_Fortune的博客
05-24 191
【代码】Element UI el-tree换行显示。
el-tree文本内容过多显示不完全问题（解决）
weixin_30565327的博客
07-05 3233
布局： <span class="custom-tree-node" slot-scope="{ node, data }"> 外层span 树节点 <span :title="node.label" class="em-tree-text">{{ node.label }}</span> 内层span(用于文本内容显示) <span&...
elementUI 中tree的节点文字过长显示不全的解决办法
u011004827的博客
04-15 3713
elementUI 中tree的节点文字过长显示不全的解决办法：使用el-scrollbar <el-scrollbar> <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
解决element el-tree(树形结构)内容太长背景色覆盖不全的问题
weixin_50418353的博客
12-20 1553
问题: 原因: div出现滚动条之后宽度无法达到文字一样长 解决方法: 选中 el-tree 的 .el-tree-node 类名设置 min-width: max-content 最小宽度=内容宽度 /* 树形结构内容太长背景色覆盖不全 */ .orgnTree /deep/ .el-tree--highlight-current .el-tree-node { min-width: max-content; } 效果: ...
Element UI Tree树形结构节点过长时-换行显示
weixin_57246351的博客
04-24 3790
换行显示 <template> <div> <div class="tree"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" ></el-tree> </div> </div> </template> <script
解决el-tree子节点展开后显示不全的问题
m0_66743830的博客
12-25 973
在样式中添加一下代码。
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element-ui的`el-tree`组件中实现这一功能。 首先，我们要理解`el-tree`的工作原理...
Element-ui tree组件自定义节点使用方法代码详解
10-18
本文通过实例代码给大家介绍了Element-ui tree组件自定义节点使用方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue + element ui工程，Tree 树形控件展示指定值，比如name
03-09
在Vue.js框架中，Element UI库提供了一套...这个项目不仅展示了如何自定义Tree组件的显示，还提供了使用Vue和Element UI进行前端开发的基本结构。对于想要学习Vue和Element UI的开发者来说，这是一个很好的实践案例。
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置为空数组时，树形控件的节点依然保持选中的状态，这与预期的行为不符。 `default-checked-keys`属性是Element UI Tree...
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
element ui的el-tree文字显示不全的解决办法
热门推荐
Beam
11-20 2万+
element ui的el-tree文字显示不全的解决办法方法一： 最简单的设置横向滚动条方法二： 添加拖拽条改变外层容器宽度方法三： 通过...表示 鼠标移上去显示全称 使用element ui的树组件el-tree时，经常出现如下问题： el-tree渲染时因为文字内容长度不一致，导致过长的文字无法显示完全。 经尝试发现如下三种解决方法，推荐方法三。 方法一： 最简单的设置横向滚动条 效果：...
el-tree节点溢出隐藏显示不完整以及底部滚动条不显示解决办法
qq_59224836的博客
07-09 2271
一般情况下，el-scrollbar包裹住el-tree会出现tree中的节点显示不完整以及下方滚动条显示不全的问题，只需要把以下代码添加进即可。
el-tree节点内容过长，设置横向滚动条时，内长外短，导致el-tree不能正常产生横向滚动条
string佳佳的博客
03-06 1830
是因为内节点没有把外面的父级撑宽，解决办法如下： .el-tree>.el-tree-node{ min-width:100%; display: inline-block; }
【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化 以及选中默认节点
c327127960的博客
05-09 679
【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化 以及选中默认节点
el-tree文本内容过长显示不出来，给el-tree加滚动条
weixin_44370837的博客
02-05 2315
使用elment-ui中的el-tree组件，让el-tree有滚动条 首先在网上搜索了，说使用以下代码就能生效，然而，我使用不生效，打开开发者工具发现这些样式根本没有加上去 .el-tree { .el-tree-node { display: inline-block; min-width: 100%; } } 于是乎，分析想要出现滚动条的原理，也就是想要在el-tree直接子级元素下面的el-tree-node添加属性，因此改用下面的写法，成功解决问题。 .el-tree > :n
第三十五篇：element UI tree 树图文字过多超出隐藏带...鼠标经过显示超出的文字
maliyao4233的博客
10-20 1085
问题说明：tree树状图展开的时候问题太长被覆盖。methods:鼠标经过事件。
element ui Tree 树形控件
05-29
Element UI Tree 树形控件是一种常见的前端组件，它能够以树形结构展示数据，通常用于菜单、目录结构、分类等场景。在 Element UI 中，Tree 树形控件有多种使用方式，包括普通树、可复选树、可拖拽树、异步加载树...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值