element-ui tree添加提示线

最新推荐文章于 2025-04-15 15:46:57 发布

攻城狮狮

最新推荐文章于 2025-04-15 15:46:57 发布

阅读量7.2k

点赞数 6

分类专栏： js vue element-ui

本文链接：https://blog.youkuaiyun.com/wodebokecsdn/article/details/93620013

版权

js 同时被 3 个专栏收录

43 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文详细介绍了如何使用Element UI的Tree组件并进行自定义样式调整，包括解决节点间缝隙问题，隐藏不必要的图标，以及调整边框样式，使树状结构更加美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面渲染好tree

<template>
    <div class='mytree'>
        <el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick"> 
        </el-tree>
    </div>
</template>

注意：：indent='0'这一项设置一下，否则线跟节点之间会有很大的缝隙

二、写样式

<style lang="scss" scoped>
.mytree /deep/{
     .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }
    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf{
      display: none;
    }
    .el-tree-node__children {
      padding-left: 16px;
    }

    .el-tree-node :last-child:before {
      height: 38px;
    }

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

    .el-tree > .el-tree-node:after {
      border-top: none;
    }

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

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

    .el-tree-node:before {
      border-left: 1px dashed #4386c6;
      bottom: 0px;
      height: 100%;
      top: -26px;
      width: 1px;
    }

    .el-tree-node:after {
      border-top: 1px dashed #4386c6;
      height: 20px;
      top: 12px;
      width: 24px;
    }
  }
<style>

效果图：