Vue?element樹形控件添加虛線詳解
更新時(shí)間：2021年11月23日 15:12:56 作者：一只小木頭.
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)代碼
樹形控件虛線的添加主要通過(guò)控制css來(lái)實(shí)現(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é)點(diǎn)有間隙，隱藏掉展開按鈕就好了,如果覺(jué)得空隙沒(méi)事可以刪掉
.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.其他實(shí)現(xiàn)
vue通過(guò)element樹形控件實(shí)現(xiàn)樹形表格
Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue商城中商品“篩選器”功能的實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
uni-app中vue3表單校驗(yàn)失敗的問(wèn)題及解決方法
最近遇到這樣的問(wèn)題在app中使用uni-forms表單,并添加校驗(yàn)規(guī)則,問(wèn)題是即使輸入內(nèi)容,表單校驗(yàn)依然失敗,本文給大家分享uni-app中vue3表單校驗(yàn)失敗的問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-12-12
vue通過(guò)子組件修改父組件prop的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue通過(guò)子組件修改父組件prop的幾種實(shí)現(xiàn)方式,比較常用的方式是通過(guò)Prop單向傳遞的規(guī)則，需要的朋友可以參考下2021-09-09
Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
本文通過(guò)實(shí)例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能,需要的朋友可以參考下2018-08-08
記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐詳解
這篇文章主要介紹了記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue項(xiàng)目中form?data形式傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇淺談vuex中store的命名空間，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。接下來(lái)通過(guò)本文給大家介紹vue的基本用法與常見(jiàn)指令，感興趣的朋友一起看看吧2017-08-08