Vue|Vue element树形控件添加虚线详解 Vueelement树形控件添加虚线详解

1.实现效果
2.实现代码
3.其他实现
总结

1.实现效果

文章图片

2.实现代码树形控件虚线的添加主要通过控制css来实现，并且在树形控件的缩进数只能为0，令class=“mytree”

css的设置为以下代码，使用了::v-deep进行样式穿透

::v-deep .mytree {.el-tree > .el-tree-node:after {border-top: none; }.el-tree-node {position: relative; padding-left: 16px; }//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉.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; }}

3.其他实现 vue通过element树形控件实现树形表格
Element-ui实现树形控件节点添加图标

总结
【Vue|Vue element树形控件添加虚线详解】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!