文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于Vue技术实现递归组件的方法

2024-04-02 19:55

关注

描述

本文介绍的是基于Vue技术实现递归组件的方法。用Vue实现一级列表、二级列表的展示很简单,但是想要实现无限级,光是套上一个又一个的v-for是行不通的,这个时候就需要用到递归的方法,所谓递归,就是不断调用自身,递归组件就是不断调用自身组件来实现无限级列表展示。如下图:

代码实现

1、tree组件

在目录下创建一个 tree.vue 的组件。


<!-- tree 树形组件  -->
<template>
  <div class="container">
      <div v-for="item in treeData" :key="item">
        <div class="row" @click="extend(item)">
            <span
                ref="icon"
                class="icon-common"
                :class="{
                    'icon-down': item.children,
                    'icon-radio': !item.children,
                    'icon-rotate': item.isExtend
                }"
            ></span>
            <span class="title">{{ item.title }}</span>
        </div>
        <div v-if="isExtend(item)" class="children">
            <tree :tree-data="item.children" :is-extend-all="isExtendAll" />
        </div>
  </div>
  </div>
</template>

<script>
export default {
    props: {
        // 组件数据
        treeData: {
            type: Array,
            default: [],
        },
        // 是否默认展开全部
        isExtendAll: {
            type: Boolean,
            default: true,
        }
    },
    methods: {
        // 展开列表
        extend(item) {
            if (item.children) {
                item.isExtend = !item.isExtend;
            }
        },
        isExtend(item) {
            const isExtend = !item.isExtend && true;
            return this.isExtendAll ? isExtend : !isExtend;
        }
    }
}
</script>

<style scoped>
.container {
    font-size: 14px;
}
.row {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.icon-common {
    display: inline-block;
    transition: all .3s;
}
.icon-down {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top: 6px solid #000;
    border-bottom: none;
}
.icon-radio {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.icon-rotate {
    transform: rotate(-90deg);
}

.title {
    margin-left: 10px;
}
.children {
    padding-left: 20px;
}
</style>

2、引用

在需要用到 tree 组件的地方引入该组件。


<template>
 <tree :tree-data="treeData" />
</template>

<script>
import Tree from './components/tree.vue';

export default {
 components: {
  Tree,
 },
 data() {
  return {
   treeData: [
    {
     title: '一级列表1',
     children: [
      {
       title: '二级列表1',
                            children: [
                                {
                                    title: '三级列表1',
                                }
                            ]
      },
      {
       title: '二级列表2',
      }
     ]
    },
    {
     title: '一级列表2',
     children: [
      {
       title: '二级列表1',
      },
      {
       title: '二级列表2',
      }
     ]
    },
    {
     title: '一级列表3',
     children: [
      {
       title: '三级列表1',
      },
      {
       title: '三级列表2',
      },
      {
       title: '三级列表3',
      }
     ]
    }
   ]
  }
 }
}
</script>

效果图

总结

该组件只实现了数据展示以及一些基本功能,肯定是不满足一些项目上的实际需求,若要使用,还需自己在此基础上去拓展完善。(例如使用该组件实现左侧菜单,可以自己配置数据,稍微修改下组件模板,实现点击跳转)。

组件功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯