vue组件横向树实现

最新推荐文章于 2025-04-24 16:54:51 发布

若晨工作室

最新推荐文章于 2025-04-24 16:54:51 发布

阅读量7.8k

点赞数 2

分类专栏： vue2.0 文章标签： vue组件横向树 css3 伪元素

本文链接：https://blog.youkuaiyun.com/wojiaomaxiaoqi/article/details/81329220

版权

本文介绍了如何将CSS3和jQuery实现的横向树转换为Vue组件。通过创建名为transverseTree.vue的组件，并在Vue项目中导入和使用。组件接受treeData数组作为输入，展示树形结构。目前的代码仅支持特定样式，如1父节点-1子节点-1/多孙节点或1父节点-多子节点-1孙节点。作者计划未来优化代码以提高复用性，欢迎交流讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue

代码：

<template>
    <div class="tree">
        <ul v-if="treeData && treeData.length">
            <li v-for="(column,index) in treeData">
                <span class="root">{
  {column.name}}</span>
                <ul v-if="column.children && column.children.length">
                    <li v-for="(childrenColumn,index) in column.children">
                        <span>{
  {childrenColumn.name}}</span>
                        <ul v-if="childrenColumn.children && childrenColumn.children.length">
                            <li v-for="(grandChildrenColumn,index) in childrenColumn.children">
                                <span>{
  {grandCh

最低0.47元/天解锁文章