element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题 el-tree宽度

最新推荐文章于 2024-07-02 08:55:42 发布
最新推荐文章于 2024-07-02 08:55:42 发布
阅读量131 收藏
点赞数 2
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73430799/article/details/139801453
版权

设置完父级的宽度之后，el-tree将不能被撑开，一旦子树的内容太长就显示不出来了；

原因分析： 因为.el-tree-node__content的 display默认的是flex，所以下边的div内容撑不起来，而且.el-tree-node__children的overflow属性是hedden，所以下边的内容一多就自动隐藏了；

解决方法： 

.el-tree{

　　.el-tree-node__content{

　　　　display: block!important;

　　}

　　.el-tree-node__children{

　　　　overflow: visible!important;

　　}

}

转自element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题-CSDN博客

张牛儿
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题
weixin_30545285的博客
11-20 3122
设置完父级的宽度之后，el-tree将不能被撑开，一旦子树的内容太长就显示不出来了； 原因分析： 因为.el-tree-node__content的 display默认的是flex，所以下边的div内容撑不起来，而且.el-tree-node__children的overflow属性是hedden，所以下边的内容一多就自动隐藏了； 解决方法： .el-tree{ ...
element-ui中使用el-tree横向滚动条不显示
ingenuou_的博客
12-08 2349
element-ui中使用el-tree横向滚动条不显示
element-ui el-collapse 折叠面板内部数据动态加载导致无法展开
热门推荐
L_shouzi的博客
09-27 1万+
如下图所示 面板内部数据为动态加载数据；为较少不必要的请求我们设置用户点击对应列表时请求对应列表下数据；如下代码所示： <el-collapse v-model="activeNames" @change="handleChange" v-loading='companylistLoading'> <el-collapse-item v-for...
关于element-ui中使用el-scrollbar包裹el-tree时横向滚动条不显示的问题
qq_31051683的博客
12-14 5646
在全局style中给节点文字父元素加padding撑开，然后设overflow为visible即可 .el-tree-node :nth-child(2) { padding: 1px; overflow: visible; }
element-ui表格el-table的使用
m0_63040701的博客
06-01 6712
element-ui表格Table详解。
elementui文本框换行_Element-Ui el-tree 超出部分自动换行
weixin_42444974的博客
01-13 3433
在使用element-ui 框架做vue 项目树结构时，发现需要固定树结构的宽度，而且树结构的字段有可能会特别长，一行根本无法显示，加长又会影响展示效果，div 的宽度固定，写了样式覆盖掉el-tree 内部的结构图片.png {{ node.label }} append(data)">加入el-tree 组件外部加个div 添加class="tree", 这里我使用el-row el-c...
让element-ui中el-select不换行的方式
VeraHsiang的博客
08-20 3251
在elementui中，使用select多选的方式，往往会把高度撑开了 我们查看console中，dom元素，发现产生如下元素，把高度给撑开了 解决方案如下： 在style中，增加如下css（不能在scoped中添加，在scoped中写不会生效） .el-select__tags { flex-wrap: nowrap; overflow: hidden; } 实现效果如下图： ...
element tree 加min-width解决label长度过短不好看。和宽度写死x轴不滚动问题
qq_43780814的博客
12-02 1288
.el-tree无宽度时，由label内容撑开，高亮和背景不好看 /deep/ .el-tree{ //加宽度 min-width: 300px; } <template lang="pug"> .aaa el-scrollbar.left(style="height: 200px;width:300px") el-tree(:data="data" :props="defaultProps" @node-click="handleNodeClick") &.
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
Vue-Ci搭建项目
2301_78875117的博客
06-26 513
npm 是Node.js的包管理工具,用来安装各种 Node.js的扩展。vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;JavaScript 的包管理工具,也是世界上最大的软件注册表。简单的说 Node.js是一个前端js运行环境或者说是一个JS语言解释器。好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个。骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;创建 index.js 文件,在其中配置路由。其他开发人员共享的代码。
深入理解 Vue.js 中的 deep: true
weixin_42279822的博客
06-26 790
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue3插槽的使用
qq_47040462的博客
06-28 412
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
【vueUse库Component模块各函数简介及使用方法--上篇】
最新发布
xiejunlan的博客
07-02 1016
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
查看VUE中安装包依赖的版本号
fangcaojushi的博客
06-28 324
使用 npm list --depth=2 命令可以列出项目中直接依赖的包及其版本，以及间接依赖的包的最新版本和实际安装的版本。使用 npm list --depth=1 命令可以列出项目中直接依赖的包及其版本，以及间接依赖的包的最新版本。使用 npm ls 命令可以列出项目中所有已安装的依赖包及其版本。
element-ui 中 el-tree 的updateKeyChildren方法怎么用
06-08
`updateKeyChildren` 方法用于更新指定节点的子节点，其语法如下： ``` updateKeyChildren(key, data) ``` 其中，`key` 参数为需要更新的节点的 key 值，`data` 参数为新的子节点数据。 你可以按照以下步骤使用 `updateKeyChildren` 方法： 1. 获取 `el-tree` 组件的引用，例如： ``` const tree = this.$refs.tree; ``` 2. 找到需要更新子节点的节点，例如找到 key 为 `1` 的节点： ``` const node = tree.getNode('1'); ``` 3. 构造新的子节点数据，例如： ``` const newData = [ { label: '子节点1-1', key: '1-1' }, { label: '子节点1-2', key: '1-2' } ]; ``` 4. 调用 `updateKeyChildren` 方法，更新子节点： ``` tree.updateKeyChildren(node.key, newData); ``` 以上代码将会将节点 `1` 的子节点更新为 `子节点1-1` 和 `子节点1-2`。 注意，使用 `updateKeyChildren` 方法更新节点的子节点时，子节点的 `key` 值必须唯一，否则可能会导致数据错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值