Detailed explanation of adding dotted lines to Vue element tree controls

1. Achieve results
2. Implementation Code
3. Other Implementations
Summarize

1. Achieve results

Rendering

2. Implementation Code

The addition of dotted lines to the tree control is mainly achieved by controlling CSS, and the indent number of the tree control can only be 0, so let class="mytree"

   <div class="mytree">
          <!--indent can only be 0-->
          <el-tree
              :data="tree_data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              indent="0"
              :render-content="renderContent"
          ></el-tree>
   </div>

The css is set to the following code, using ::v-deep for style penetration

<style lang="scss" scoped>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //There is a gap between nodes, just hide the expand button, if you think the gap is okay, you can delete it.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>

3. Other Implementations

Vue implements tree table through element tree control

Element-ui implements adding icons to tree control nodes

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Vue implements tree table through element tree control
Vue Element-ui table realizes tree structure table
Vue component library ElementUI implements table loading tree data tutorial
Vue+element UI realizes tree table
Vue+Element UI tree control integrates drop-down function menu (tree + dropdown +input)
Vue Element-ui implements tree control node adding icon detailed explanation

<<: How to hide a certain text in HTML?

>>: Pure CSS to achieve the internal anchor point of the web page when the up and down offset code example