|
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; } //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉 .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.其他实现vue通过element树形控件实现树形表格 Element-ui实现树形控件节点添加图标
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容!
下载地址:
JS数组循环的方式以及效率分析对比
vue通过element树形控件实现树形表格 |
