首页 > 其他分享 >el-tree设置每个节点的连接线 修改展开图标为加减号(附效果图)

el-tree设置每个节点的连接线 修改展开图标为加减号(附效果图)

时间:2024-06-12 14:31:31浏览次数:13  
标签:node 连接线 16px tree el border left

  ::v-deep .treeCont {
 .el-tree > .el-tree-node:nth-of-type(1){
  border-top: none !important;
  color: red;
}
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree :first-child{
      border-top: none !important;
    }
    .el-tree-node{
      margin-left: 10px;
    }
    .el-tree-node__children {
       .el-tree-node {
        position: relative;
        padding-left: 10px;

      }
    }
    .el-tree-node__expand-icon.is-leaf{
      width: 4px;
    }
    .el-tree-node__children {
      padding-left:10px;
      position: relative;
      top: -15px;
    }

    .el-tree-node :last-child:before {
      height: 44px;
    }
    .el-tree-node ::nth-of-type(1) {
      border-top: none !important;
      color: red;
    }

    .el-tree > .el-tree-node:before {
      border-left: none;

    }
    .el-tree-node:before {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:after {
      content: "";
      left: 23px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:before {
      border-left: 1px dashed #c0c4cc;
      // bottom: 10px;
      height: 100% !important;
      left: 23px;
      top: -13px;
      width: 15px !important;
    }
    .el-tree-node:after {
      // border-top: 1px dashed #c0c4cc;
      height: 100% !important;
      width: 20px;
    }
    .el-tree-node:after {
      border-bottom: 1px dashed #c0c4cc; 
      position: absolute;
      top: -13px;
    }
}

 .el-tree ::v-deep .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree ::v-deep .el-icon-caret-right:before {
   background: url("../../views/sirmCredit/creditrating/industry/img/plus-square.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
.el-tree
  ::v-deep
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
   background: url("../../views/sirmCredit/creditrating/industry/img/plus-square.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
.el-tree ::v-deep .el-tree-node__expand-icon.is-leaf::before {
   background: none;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

标签:node,连接线,16px,tree,el,border,left
From: https://blog.csdn.net/sh11223312/article/details/139532684

相关文章

  • CBT-LLM: A Chinese Large Language Model for Cognitive Behavioral Therapy-based M
    本文是LLM系列文章,针对《CBT-LLM:AChineseLargeLanguageModelforCognitiveBehavioralTherapy-basedMentalHealthQuestionAnswering》的翻译。CBT-LLM:一个基于认知行为治疗的心理健康问答的中文大语言模型摘要1引言2相关工作3方法4实验5结论和未......
  • 【CMake系列】08-debug release特性设置
    在构建的程序版本中,一共有debugreleaseminisizerelwithDebugInfo四种,其中我们主要使用到就是debugrelease两种,这两种存在着一定的不同,debug版本用于调试,有调试信息,方便调试,体积也更大;release版本用于发布,体积更小;在使用cmake针对debugrelease配置时也存在一定的不......
  • Quasar+Electron开发打包为桌面端exe
    上一篇博客写了Quasar+Cordova开发打包移动端app,今天来写一下Quasar+Electron如何开发打包为桌面端exe。Electron英文文档:https://www.electronjs.org/docs/latest/  Electron中文文档:https://electron.nodejs.cn/Quasar+Electron文档:https://www.quasar-cn.cn/quasar-cli......
  • CSCI-UA.0480-051: Parallel Computing
    CSCI-UA.0480-051:ParallelComputingFinalExam(May 15th,2023)Total:100 pointsProblem 1Supposewehavethe followingtwo DAGs. Each DAG represents a process. That is, DAG 1 is a process and DAG 2 is another process. The two DAG......
  • 删除elasticsearch数据
    删除elasticsearch数据分为两种:一种是删除索引(数据和表结构同时删除,作用同sqlserver中droptable"表格名"),另一种是删除数据(不删除表结构,作用同sqlserver中delete语句)1、查询索引curl-XGEThttp://127.0.0.1:9201/_cat/indices?vcurl-uuser:passwd -XGEThttp://127......
  • Selenium的三种等待方式
    目录Selenium的三种等待方式1、强制等待2、隐式等待3、显性等待Selenium的三种等待方式        什么是等待机制?    等待就是当系统运行时,如果页面渲染的速度跟不上程序执行的速度,这时就需要人为的去限制计算机的执行速度。例如在WebUI自动化测试的时......
  • 128个双路2.66GHz Intel Nehalem 四核处理器计算节点的HPC集群,其峰值计算是多少?
    每个IntelNehalem四核处理器的主频是2.66GHz,这意味着每个核每秒可以执行2.66×10^9次操作。每个处理器有四个核心,所以每个处理器每秒可以执行的操作次数是4×2.66×10^9。每个计算节点是双路的,即每个节点有两个这样的处理器,因此每个节点的峰值计算能力就是2×(4×2.66×10^9......
  • tree-cli 生成项目目录
    全局安装插件npminstall-gtree-cli基本使用#查看帮助tree--help#指定目录层级(深度)tree-l2#将结果输出到test.txt文件tree-l2-otest.txt#只输出目录-dtree-l2-otest.txt-d#忽略指定的目录或文件--ignoretreee-l2-otest.txt--ignore'n......
  • excel中加水印以及二维码
    1.如何给excel添加二维码其实二维码就是一张图片,把生成的二维码作为图片返回给excel对应的栏位就可以达到目的,代码如下:点击查看代码publicBitmapGetBitmap(stringcode,ExcelPackagepackage){varsheet=package.Workbook.Worksheets[0];//创建QR码生成器......
  • 升级babel7后,直接引用element-ui中没有暴露出来的组件image-viewer.vue导致的打包错误
    问题&解决方案升级babel7后,原先代码中像这样直接引用element-ui组件的地方,出现了报错Moduleparsefailed:Unexpectedtoken(1:0)Youmayneedanappropriateloadertohandlethisfiletype.经过一番排查,我发现问题出在element-ui并未直接暴露该组件,导致直接引用时......