目錄

• 1.實現效果
• 2.實現程式碼
• 3.其他實現
• 總結

1.實現效果

2.實現程式碼

樹形控制元件虛線的新增主要通過控制來實現http://www.cppcns.com，並且在樹形控制元件的縮排數只能為0，令class=“mytree”

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

css的設定為以下程式碼，使用了::v-deep進行樣式穿透

<style lang="scss" scoped>
::v-deep .mytree {
  .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-treezieiamQGQh
 
-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.其他實現

通過element樹形控制元件實現樹形表格

Element-ui實現樹形控制元件節點新增圖示

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!