el-tree中展示项换行展示

文章目录

  • 效果如下所示:
    • 没有换行展示的效果
    • 修改样式换行之后的展示效果
  • 想要了解el-tree使用的详情往下看
  • 代码和数据如下所示
    • Vue代码中可能使用到的数据如下
    • Vue的代码如下:
    • 没有换行展示的效果
    • 换行之后的展示效果
    • 样式调试

效果如下所示:

没有换行展示的效果

在这里插入图片描述

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

本质上就是在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之后调试中我们可以看到
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/182488.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读—— CEASC(cvpr2023)

arxiv&#xff1a;https://arxiv.org/abs/2303.14488 github&#xff1a;https://github.com/Cuogeihong/CEASC 为了进一步减轻SC中的信息损失&#xff0c;使训练过程更加稳定&#xff0c;我们在训练过程中除了稀疏卷积之外&#xff0c;还保持了正常的密集卷积&#xff0c;生成…

JAVA虚拟机-第3章 垃圾收集器与内存分配策略

概述 第2章了解了运行时数据区&#xff0c;这一章探讨垃圾收集器与内存分配策略 程序计数器、虚拟机栈、本地方法栈3个区域随线程而生&#xff0c;随线程而灭&#xff0c;栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作。因此这几个区域的内存分配和回收都具…

【3D图像分割】基于Pytorch的VNet 3D 图像分割5(改写数据流篇)

在这篇文章&#xff1a;【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割2&#xff08;基础数据流篇&#xff09; 的最后&#xff0c;我们提到了&#xff1a; 在采用vent模型进行3d数据的分割训练任务中&#xff0c;输入大小是16*96*96&#xff0c;这个的裁剪是放到Dataset类…

开放式耳机能保护听力吗?开放式耳机有哪些优缺点?

先说答案&#xff0c;开放式耳机是可以保护听力的&#xff01; 想要了解开放式耳机是否能保护听力&#xff0c;就要先知道什么是开放式耳机&#xff0c;开放式耳机是一种无需入耳&#xff0c;并且使用时不会堵塞耳道&#xff0c;也不会隔绝外界声音的蓝牙耳机。 一、开放式耳…

【服务器使用】vscode winscp进行服务器容器连接(含修改初始密码)

1&#xff1a;获取docker的登陆信息 例如节点&#xff08;host&#xff09;、端口&#xff08;port&#xff09;、密码&#xff08;passwd&#xff09;等信息&#xff0c;这个自己找组内的前辈获取即可 2&#xff1a;配置config文件 找到vscode里面ssh处的config文件 人工找…

spring面试题笔记

SpringBoot 有几种读取配置文件的方式 1.value 必须是bean里才能生效&#xff0c;&#xff0c;final或static无法生效 2ConfigurationProperties注解 ConfigurationProperties是springboot提供读取配置文件的一个注解 注意&#xff1a; 前缀定义了哪些外部属性将绑定到类的字…

C++模板编程与泛型编程之函数模板

文章目录 函数模板(第一部分)定义函数模板使用函数模板样例 两阶段翻译 Two-Phase Translation模板的编译和链接问题 多模板参数引入额外模板参数作为返回值类型让编译器自己找出返回值类型将返回值声明为两个模板参数的公共类型样例 默认模板参数样例 重载函数模板模板函数特化…

智能工厂架构

引:https://www.bilibili.com/video/BV1Vs4y167Kx/?spm_id_from=333.788&vd_source=297c866c71fa77b161812ad631ea2c25 智能工厂框架 智能工厂五层系统框架 MES 数据共享 <

Kafka(二)消息系统设计

文章目录 前言整体设计时序图时序图解释 最后 前言 当多个系统之间通过Kafka来解耦时&#xff0c;在系统设计初期&#xff0c;基本的要求都是相似的&#xff0c;只不过是消费消息时的业务逻辑可能不同。 本文以业务系统和邮件系统解耦作为示例。业务系统需要发送邮件时&#…

SQL左连接实战案例

要求&#xff1a;用表df1和表df2的数据&#xff0c;得到df3 一、创建表 CREATE TABLE df1 (姓名 varchar(255) DEFAULT NULL,年龄 int DEFAULT NULL,部门 varchar(255) DEFAULT NULL,id int DEFAULT NULL );CREATE TABLE df2 (部门 varchar(255) DEFAULT NULL,年龄 int DEFAU…

API接口测试工具的功能及重要性

在现代软件开发中&#xff0c;API(Application Programming Interface)接口的测试至关重要。API接口是不同软件组件之间的桥梁&#xff0c;通过它们实现数据传输和功能交互。API接口测试工具是一类专门用于验证和测试这些接口的软件工具。本文将探讨API接口测试工具的定义、功能…

【高德地图API】JS高德地图API实现多边形绘画,高德获取多边形提交数据

目录 前言效果实现引入js 在项目中使用效果图引入htmlCSS具体实现JS调用说明添加的时候修改的时候判断是否在范围内 java绘画和判断是否在范围内pom.xml依赖引入import引入实现 前言 高德地图官方API&#xff1a;https://lbs.amap.com/demo/javascript-api/example/overlayers…

HTTPS的加密方式超详细解读

在了解https的加密方式之前&#xff0c;我们需要先行了解两个特别经典的传统加密方式&#xff1a; 1、对称加密 1.1、定义 需要对加密和解密使用相同密钥的加密算法。所谓对称&#xff0c;就是采用这种加密方法的双方使用方式用同样的密钥进行加密和解密。密钥是控制加密及解…

SPSS多元方差分析

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

独立键盘接口设计(Keil+Proteus)

前言 软件的操作参考这篇博客。 LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;-CSDN博客https://blog.csdn.net/weixin_64066303/article/details/134101256?spm1001.2014.3001.5501实验&#xff1a;用4个独立按键控制8个LED指示灯。 按下k1键&#x…

Microsoft Edge不能工作了,可能原因不少,那么如何修复呢

Microsoft Edge打不开或不能加载网页是用户在Windows 10、Android、Mac和iOS设备上的网络浏览器上遇到的许多错误之一。其他Microsoft Edge问题可能包括浏览器窗口和选项卡冻结、网站崩溃、互联网连接错误消息以及丢失Microsoft Edge书签、收藏夹、密码和收藏。 Microsoft Edg…

从零开始制作一个割草机器人

项目背景 为啥要做一个割草机器人呢&#xff1f;&#xff08;个人因素&#xff1a;我梦想就是做一款人形机器人保护人类&#xff0c;解放人类&#xff09; 基础准备&#xff1a;我们公司本身做过高精度&#xff0c;基于高精度的技术扩展到农机自动化驾驶。目前可以实现AB线拖…

【深蓝学院】手写VIO第8章--相机与IMU时间戳同步--作业

0. 题目 1. T1 逆深度参数化时的特征匀速模型的重投影误差 参考常鑫助教的答案&#xff1a;思路是将i时刻的观测投到world系&#xff0c;再用j时刻pose和外参投到j时刻camera坐标系下&#xff0c;归一化得到预测的二维坐标&#xff08;这里忽略了camera的内参&#xff0c;逆深…

51单片机的篮球计分器液晶LCD1602显示( proteus仿真+程序+原理图+PCB+设计报告+讲解视频)

51单片机的篮球计分器液晶LCD1602显示 &#x1f4d1;1.主要功能&#xff1a;&#x1f4d1;讲解视频&#xff1a;&#x1f4d1;2.仿真&#x1f4d1;3. 程序代码&#x1f4d1;4. 原理图&#x1f4d1;5. PCB图&#x1f4d1;6. 设计报告&#x1f4d1;7. 设计资料内容清单&&…

【数据结构】——顺序表(增删查改)

目录 前言&#xff1a; 顺序表&#xff1a; 1、概念及分类 1.1顺序表分类 静态顺序表 动态顺序表 2、接口实现 2.1功能要求 2.2功能实现 &#x1f4a1;初始化顺序表 &#x1f4a1;销毁顺序表 &#x1f4a1;顺序表尾插入 &#x1f4a1;检查是否扩容 &#x1f4a1;…