首页 > 其他分享 >el-tree 组件自定义样式 最后一级flex,其余级别正常block

el-tree 组件自定义样式 最后一级flex,其余级别正常block

时间:2024-08-12 11:31:00浏览次数:13  
标签:el style childrenElement 自定义 flex 样式 tree

先上需求的效果图

el-tree的样式一般全都是block换行的,如下图

先分析一下,
1.树结构的级别是不确定的,但是样式上要求最后一个层级需要横着排列,其余竖着排,超出需要换行
2.如何找到每一个数据项的最后一级呢?
3.找到之后怎么办?

ok,then,
1.先通过插槽吧,因为这样咱们可以自定义最后一个节点的样式,加一个类名作为标识

<el-tree :data="chanelItemList" show-checkbox default-expand-all node-key="id" ref="tree" :highlight-current="false"
    :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"
    :default-checked-keys="defaultCheckedKeys">
    <template #default="{ node, data }">
      <span class="last-level-node">{{ data.label }}</span>
    </template>
  </el-tree>

2.通过浏览器编译后,可以看到这个类名标识,且能够反向找到需要改成横着拍的元素,如图:
需要修改的是这个span的父级的父级的父级的样式

3.通过js来做行内样式修改

addClass() {
      // 获取所有最后一级节点对应的 .el-tree-node__children 元素
      document.querySelectorAll('.last-level-node').forEach(function (element) {
        // 获取 .el-tree-node__children 元素
        const childrenElement = element.parentNode.parentNode.parentNode;
        // 添加 display: flex; 的行内样式
        childrenElement.style.display = 'flex';
        childrenElement.style.flexWrap = 'wrap'; 
        childrenElement.style.flexDirection = 'row'; // 可选:明确指定水平方向
        childrenElement.style.alignItems = 'center'; // 可选:对齐方式
      });
    }
在钩子函数中调用一下
created() {
    this.$nextTick(() => {
      this.addClass()
    })
  }

然后就ok啦~~~

标签:el,style,childrenElement,自定义,flex,样式,tree
From: https://www.cnblogs.com/jocelyn11/p/18354581

相关文章

  • 第七期 Semantic Kernel(另一个AI框架,了解即可)
    一:LangChain和SemanticKernel对比https://blog.csdn.net/xiaoqi270620903/article/details/138334622SemanticKernel适用于需要快速构建LLM应用的场景,如智能客服、智能问答等。由于其组件关系简单,开发人员可以快速实现LLM模型的应用,并且可以根据需求进行定制化开发。La......
  • 环境配置:如何在IntelliJ IDEA中安装和修改JDK版本配置(以Windows为例)
    环境配置:如何在IntelliJIDEA中安装和修改JDK版本配置(以Windows为例)为了在Java开发中使用最新的功能和优化,升级和配置JDK版本是必不可少的。本文将详细介绍如何下载、安装、配置最新的JDK版本,并在IntelliJIDEA中正确设置项目的JDK版本,确保你的开发环境能够支持最新的Java......
  • Vue自定义指令——函数式与对象式以及注意事项
    作者:CSDN-PleaSure乐事欢迎大家阅读我的博客希望大家喜欢使用环境:vscodeChrome浏览器目录1.什么是自定义指令1.1定义2.函数式自定义指令2.1定义2.2书写格式与效果3.对象式自定义指令3.1定义3.2书写格式与效果4.需要注意的坑4.1命名4.1.1问题4.1.2原因4.1.3......
  • SAP EXCEL数据上传代码
    *---获取数据DATA:LT_EXCELTYPETABLEOFALSMEX_TABLINE,"具有Excel数据的表行LV_INDEXTYPEI."项目位置*&---读取EXCEL到内表CALLFUNCTION'ALSM_EXCEL_TO_INTERNAL_TABLE'EXPORTINGFILENAME......
  • MySQL——删除数据(二)DELETE 删除全部数据
            在DELETE语句中如果没有使用WHERE子句,则会将表中的所有记录都删除。        例如,删除student表中的所有记录,在删除数据之前首先使用查询语句查看student表中的所有记录,执行结果如下所示:mysql>select*fromstudent;+------+---------+---......
  • MySQL——删除数据(一)DELETE 删除部分数据
            删除数据是指对表中存在的记录进行删除,这是数据库的常见操作,比如一个学生转学了,就需要在student表中将其信息记录删除。MySQL中使用DELETE语句来删除表中的记录,其语法格式如下所示:DELETEFROM表名[WHERE条件表达式]    在上面的语法格式中,......
  • Opentelemetry collector用法
    Opentelemetrycollector用法目录Opentelemetrycollector用法ServiceExtensionshealthcheckextensionPipelinesreceiverOTLPReceiverprometheusreceiverfilelogreceiverProcessor数据归属Importantmemorylimiterprocessorbatchprocessorattributesprocessor&&Resourc......
  • Elasticsearch 学习总结 - 相关配置补充说明
    Elasticsearch的基本概念term索引词,在elasticsearch中索引词(term)是一个能够被索引的精确值。foo,FooFoo几个单词是不相同的索引词。索引词(term)是可以通过term查询进行准确的搜索。text文本是一段普通的非结构化文字,通常,文本会被分析称一个个的索引词,存储在elasticsearch的索......
  • Shell处理Json数据
    在Shell中处理复杂的JSON数据,一般有以下三种方式:jq:jq是一款强大的JSON处理工具,支持过滤、修改、重组和生成JSON数据。Python:使用Python来处理复杂的JSON数据。结合了Shell脚本的便利性和Python处理JSON的强大能力grep/sed/awk:在无其他工具的情况下使用grep/sed/awk等(不......
  • C#窗体自定义快捷操作键的实现 - 开源研究系列文章
          这次想到应用程序的窗体的快捷操作键的使用的问题。      上次发布过一个快捷键的例子(https://www.cnblogs.com/lzhdim/p/18342051),区别在于它是操作系统全局注册的热键,如果其它应用程序注册了对应的热键,那就会失效。此例子是对某个窗体里的按键的操作进行的......