Vue?element樹形控件添加虛線詳解
更新時間:2021年11月23日 15:12:56 作者:一只小木頭.
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助<BR>
1.實現效果

2.實現代碼
樹形控件虛線的添加主要通過控制css來實現,并且在樹形控件的縮進數只能為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.其他實現
Element-ui實現樹形控件節(jié)點添加圖標
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
Vue.js中使用iView日期選擇器并設置開始時間結束時間校驗功能
本文通過實例代碼給大家介紹了Vue.js中使用iView日期選擇器并設置開始時間結束時間校驗功能,需要的朋友可以參考下2018-08-08

