Vue?element樹形控件添加虛線詳解
1.實(shí)現(xiàn)效果

2.實(shí)現(xiàn)代碼
樹形控件虛線的添加主要通過控制css來實(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)有間隙,隱藏掉展開按鈕就好了,如果覺得空隙沒事可以刪掉
.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通過element樹形控件實(shí)現(xiàn)樹形表格
Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue商城中商品“篩選器”功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
uni-app中vue3表單校驗(yàn)失敗的問題及解決方法
最近遇到這樣的問題在app中使用uni-forms表單,并添加校驗(yàn)規(guī)則,問題是即使輸入內(nèi)容,表單校驗(yàn)依然失敗,本文給大家分享uni-app中vue3表單校驗(yàn)失敗的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
vue通過子組件修改父組件prop的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue通過子組件修改父組件prop的幾種實(shí)現(xiàn)方式,比較常用的方式是通過Prop單向傳遞的規(guī)則,需要的朋友可以參考下2021-09-09
Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
本文通過實(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í)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02

