el-tree中展示项换行展示

于 2023-11-05 18:36:53 发布
阅读量1.3k 收藏 5
点赞数
分类专栏： Vue element plus/eleemnt ui 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62317155/article/details/134232452
版权

文章目录

效果如下所示：

没有换行展示的效果

在这里插入图片描述

修改样式换行之后的展示效果

本质上就是在vue代码中对el-tree的默认样式进行了修改，这是修改样式的代码。如果想了解详细的，往后看就行了

<!-- <style scoped>

/* 这里需要用到深度选择器，否则改变不了样式，
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时，也可以这样写，
// 使用了sass也可以像上面一样写，就写两个深度选择器
// 这个我也是F12，然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

在这里插入图片描述

想要了解el-tree使用的详情往下看

这里使用的是Vite（Home | Vite中文网 (vitejs.cn)） + Vue3 + Ts建立的项目，使用了element plus（设计 | Element Plus (element-plus.org)）这个组件库。
package.json中对应的版本信息如下所示

{
  "name": "vue3-ts-vite-wen-zhang-ji-lu-xiang-mu",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

代码和数据如下所示

Vue代码中可能使用到的数据如下

假设从后端请求有一份这样的数据，属性数据result.json文件如下所示

{
    "code": 200,
    "message": "成功",
    "data": [
        {
            "mediaCatalogId": 1,
            "mediaCatalogName": "合同",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 2,
                    "mediaCatalogName": "合同",
                    "parentId": 1,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 3,
            "mediaCatalogName": "项目部组织体系文件这是一个测试项测试项测试项",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 4,
                    "mediaCatalogName": "项目部成立文件项目部组织体系文件这是一个测试项测试项测试项，我来进行测试了",
                    "parentId": 3,
                    "children": []
                },
                {
                    "mediaCatalogId": 5,
                    "mediaCatalogName": "质量管理机构人员项目部组织体系文件这是一个测试项测试项测试项，我来进行测试了",
                    "parentId": 3,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 6,
            "mediaCatalogName": "过程资料项目部组织体系文件这是一个测试项测试项测试项，测试中",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 7,
                    "mediaCatalogName": "地质资料项目部组织体系文件这是一个测试项测试项测试项，测试中",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 8,
                    "mediaCatalogName": "出工检查表",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 9,
                    "mediaCatalogName": "开工申请表",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 10,
                    "mediaCatalogName": "中期检杳查、完工验收表项目部组织体系文件这是一个测试项测试项测试项，测试中",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 11,
                    "mediaCatalogName": "钻孔较工验收单",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 12,
                    "mediaCatalogName": "钻孔质量评定表项目部组织体系文件这是一个测试项测试项测试项",
                    "parentId": 6,
                    "children": []
                },
                {
                    "mediaCatalogId": 13,
                    "mediaCatalogName": "平码验收单",
                    "parentId": 6,
                    "children": []
                }
            ]
        },
        {
            "mediaCatalogId": 14,
            "mediaCatalogName": "人员台账",
            "parentId": -1,
            "children": [
                {
                    "mediaCatalogId": 15,
                    "mediaCatalogName": "勘察单位人员台好",
                    "parentId": 14,
                    "children": []
                },
                {
                    "mediaCatalogId": 16,
                    "mediaCatalogName": "勘探单位人员台账项目部组织体系文件这是一个测试项测试项测试项",
                    "parentId": 14,
                    "children": [
                        {
                            "mediaCatalogId": 17,
                            "mediaCatalogName": "第三级分类项目部组织体系文件这是一个测试项测试项测试项",
                            "parentId": 16,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

对应的ts类型，MediaCatalog.ts

/**
 * MediaCatalog
 */
export interface MediaCatalog {
  /**
   * 创建者
   */
  createBy?: string;
  /**
   * 更新时间
   */
  createTime?: string;
  /**
   * 媒体目录ID
   */
  mediaCatalogId?: number;
  /**
   * 媒体目录名称
   */
  mediaCatalogName?: string;
  /**
   * 父级ID
   */
  parentId?: number;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 类型
   */
  type?: string;
  /**
   * 更新者
   */
  updateBy?: string;
  /**
   * 更新时间
   */
  updateTime?: string;

  /**
   * 树形结构
   */

  children?: MediaCatalog[]
  
}

Vue的代码如下：

el-tree的用法看官网：Tree 树形控件 | Element Plus (element-plus.org)，这里有基础用法，就不重复追叙了，直接上代码

<template>
  <div style="width: 300px; height: 800px;">
    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MediaCatalog } from './test/MediaCatalog.ts'
import result from './test/result.json'

interface Tree {
  /**
   * 媒体目录ID
   */
  mediaCatalogId?: number;
  /**
   * 媒体目录名称
   */
  mediaCatalogName?: string;
  /**
   * 父级ID
   */
  parentId?: number;
  /**
   * 子集
   */
  children?: Tree[]
}

const defaultProps = {

  id: 'mediaCatalogId',
  // 这个children项在树形数据中也是需要有的
  children: 'children',
  mediaCatalogId: 'mediaCatalogId',
  mediaCatalogName: 'mediaCatalogName',
  // 可以适当多添加几项，根据需求来
  parentId: "parentId",
  // // 这个label选项是必须要有的，否则无法显示文字，只展示树形关系，也就是每一层都是空白
  label: 'mediaCatalogName'

}

const handleNodeClick = (data: Tree) => {
  console.log("点击属性结构某一项的数据", data)
}

const treeData = ref<MediaCatalog[]>([])

onMounted(() => {
  console.log(result)
  treeData.value = result.data
})

</script>

<!-- <style scoped>

/* 这里需要用到深度选择器，否则改变不了样式，
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时，也可以这样写，
// 使用了sass也可以像上面一样写，就写两个深度选择器
// 这个我也是F12，然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

没有换行展示的效果

在这里插入图片描述

换行之后的展示效果

在代码中的
在这里插入图片描述
从上面的代码可以看出，本质上就是修改了el-tree的默认样式

<!-- <style scoped>

/* 这里需要用到深度选择器，否则改变不了样式，
无论scoped是否存在都需要使用到深度选择器 */
:deep(.el-tree-node) {
  white-space: normal;
  outline: 0;
}

:deep(.el-tree-node__content) {
  text-align: left;
  align-items: start;
  margin: 4px;
  height: 100%;

}


</style> -->

<style scoped lang="scss">
// 如果使用了sass时，也可以这样写，
// 使用了sass也可以像上面一样写，就写两个深度选择器
// 这个我也是F12，然后看到它们对应的关系的
:deep(.el-tree-node) {
      white-space: normal;
      outline: 0;

      .el-tree-node__content {
        text-align: left;
        align-items: start;
        margin: 4px;
        height: 100%;
      }
    }
</style>

样式调试

从F12之后调试中我们可以看到
在这里插入图片描述

m0_62317155
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element UI el-tree换行显示
D_Fortune的博客
05-24 265
【代码】Element UI el-tree换行显示。
Element UI Tree树形结构节点过长时-换行显示
weixin_57246351的博客
04-24 3977
换行显示 <template> <div> <div class="tree"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" ></el-tree> </div> </div> </template> <script
element UI + Vue 中 el-tree 超出部分自动换行
竹哎
04-08 2436
HTML代码 <div class='tree'> <el-tree :data="zptreeDate" :props="defaultProps" style="font-size:13px" accordion default-expand-all node-key :highlight-current="true" :expand-on-click-node="false" @node-click="clic
设置el-tree超出部分换行问题
weixin_44860425的博客
12-13 3594
解决element树形控件换行问题 <div class="tree"> <el-tree :props="defaultProps" :load="loadNode" :data="data" ref="tree" icon-class="el-icon-arrow-right" ...
element的tree设置可以换行,不换行显示省略号
浩星
04-15 2634
前言： 对element的tree进行二次处理，让他的内容多的时候可以自动换行 实现效果： 封装组件subjectTree.vue <template> <el-tree class="subjectTree" :data="data" :props="defaultProps" @node-click="handleNodeClick"> <div slot-scope="{ node, data }" c...
el-tree自动换行
08-27
要实现el-tree的自动换行，可以使用CSS的white-space属性。在给.el-tree-node__content类添加样式时，将white-space属性设置为normal。具体的scss代码如下： ``` .tree { .el-tree-node { white-space: normal; ...
el-tree 换行 单选框和第一行对齐
09-04
el-tree组件是Element UI框架中的一种树形控件，用于展示层级结构的数据。默认情况下，el-tree的节点都是以垂直布局显示的，即每个节点占据一行。但有时候我们希望将el-tree的节点显示成水平布局，即每个节点占据一...
el-tree组件中当节点内容超过长度显示横向滚动条
06-07
要在 el-tree 组件中让节点内容超过长度时显示横向滚动条，你可以设置 el-tree 的样式： ```css .el-tree-node__label { white-space: nowrap; /* 防止内容换行 */ overflow-x: auto; /* 显示横向滚动条 */ max-...
el-tree 添加横向滚动条
06-07
要给 el-tree 添加横向滚动条，可以在 el-tree 外面包裹一个 div 容器，并设置该容器的 overflow-x 属性为 auto。具体实现步骤如下： 1. 在 el-tree 外面包裹一个 div 容器： ``` <div class="tree-container"> ...
el-tree的多级标签都设置溢出省略号显示
05-27
你好，针对el-tree多级标签设置溢出省略号显示，可以使用CSS的text-overflow属性和white-space属性来实现。具体的实现方式如下： ...以上代码会将el-tree节点的label文本内容设置为溢出省略号显示，并且不换行。
elementui文本框换行_Element-Ui el-tree 超出部分自动换行
weixin_42444974的博客
01-13 3491
在使用element-ui 框架做vue 项目树结构时，发现需要固定树结构的宽度，而且树结构的字段有可能会特别长，一行根本无法显示，加长又会影响展示效果，div 的宽度固定，写了样式覆盖掉el-tree 内部的结构图片.png {{ node.label }} append(data)">加入el-tree 组件外部加个div 添加class="tree", 这里我使用el-row el-c...
博客摘录「 element UI + Vue 中 el-tree 超出部分自动换行」2023年9月8日
weixin_50878228的博客
09-11 255
12。
el-tree文字超出折行
最新发布
beihenanfei的专栏
10-19 355
【代码】el-tree文字超出折行。
「Element」el-tree文字显示不全，解决办法
莫奈小姐姐的博客
03-10 1195
总结项目中遇到的element使用方面遇到问题的一个解决办法
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 5803
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
Element el-tree 后台数据处理
weixin_47601243的博客
07-30 2960
Element el-tree 后台数据处理
ElementUI table内容不换行问题
浅笑如伤的博客
05-28 1万+
页面使用ElementUI的table组件，后台返回数据已经加了 \n 但在页面表格中不换行，很久之前遇到过一次，今天同事又遇到了记录一下 将.el-table.cell{ white-space:pre; } 改为 .el-table.cell{ white-space:pre-line; } ...
element ui的el-tree文字显示不全的解决办法
热门推荐
Beam
11-20 2万+
element ui的el-tree文字显示不全的解决办法方法一： 最简单的设置横向滚动条方法二： 添加拖拽条改变外层容器宽度方法三： 通过...表示 鼠标移上去显示全称 使用element ui的树组件el-tree时，经常出现如下问题： el-tree渲染时因为文字内容长度不一致，导致过长的文字无法显示完全。 经尝试发现如下三种解决方法，推荐方法三。 方法一： 最简单的设置横向滚动条 效果：...
el-tree一键全选多个树形
为写出赏心悦目、容易维护的代码而探索
05-05 2174
vue2监听父组件传过来的值父组件使用的动态组件，然后父传子子组件打印监听vue2引入文件外部css文件，这玩意可以结合媒体查询用。@import引入的css会在页面加载完毕后加载设置伪元素作为图标实现树形结构数据全选，el-tree全选多个树形，使用elementUi实现定义data中的值。。。懒得过滤给你们看具体有哪几个了，主要看功能的实现吧默认全选页面样式与引入的插件-el-tree。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值