Vue?element樹形控件添加虛線詳解

更新時間：2021年11月23日 15:12:56 作者：一只小木頭.

這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>

1.實現(xiàn)效果

效果圖

2.實現(xiàn)代碼

樹形控件虛線的添加主要通過控制css來實現(xiàn)，并且在樹形控件的縮進(jìn)數(shù)只能為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的設(shè)置為以下代碼，使用了::v-deep進(jìn)行樣式穿透

<style lang="scss" scoped>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //節(jié)點有間隙，隱藏掉展開按鈕就好了,如果覺得空隙沒事可以刪掉
  .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.其他實現(xiàn)

vue通過element樹形控件實現(xiàn)樹形表格

Element-ui實現(xiàn)樹形控件節(jié)點添加圖標(biāo)

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

VUE3中的函數(shù)的聲明和使用
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
antd中table展開行默認(rèn)展示,且不需要前邊的加號操作
這篇文章主要介紹了antd中table展開行默認(rèn)展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vuex?Actions多參數(shù)傳遞的解決方案
在?Vuex?中,actions?的設(shè)計默認(rèn)只支持單個參數(shù)傳遞,這有時會限制我們的使用場景,下面我將詳細(xì)介紹幾種處理多參數(shù)傳遞的解決方案,從基礎(chǔ)到高級,幫助您靈活應(yīng)對各種需求,需要的朋友可以參考下
2025-04-04
詳解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
解決vue?cli3使用axios跨域問題
這篇文章介紹了解決vue?cli3使用axios跨域問題，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-01-01
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關(guān)閉窗口(window.close())問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼,需要的朋友可以參考下
2018-02-02
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
VUE 動態(tài)組件的應(yīng)用案例分析
這篇文章主要介紹了VUE 動態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應(yīng)用場景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12