Vue?element樹形控件添加虛線詳解
更新時間：2021年11月23日 15:12:56 作者：一只小木頭.
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
1.實現(xiàn)效果
2.實現(xiàn)代碼
樹形控件虛線的添加主要通過控制css來實現(xià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的設置為以下代碼，使用了::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;
}
//節(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)
Element-ui實現(xiàn)樹形控件節(jié)點添加圖標
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了antd中table展開行默認展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在?Vuex?中,actions?的設計默認只支持單個參數(shù)傳遞,這有時會限制我們的使用場景,下面我將詳細介紹幾種處理多參數(shù)傳遞的解決方案,從基礎到高級,幫助您靈活應對各種需求,需要的朋友可以參考下2025-04-04
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設計思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章介紹了解決vue?cli3使用axios跨域問題，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
vue路由跳轉(zhuǎn)打開新窗口(window.open())和關閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開新窗口(window.open())和關閉窗口(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ā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了VUE 動態(tài)組件的應用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應用場景、解決方案及相關操作技巧,需要的朋友可以參考下2019-12-12