• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

描述

本文介绍的是基于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;
}
/* -----------  图标样式 START  ------------- */
.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);
}
/* -----------  图标样式 END  ------------- */
.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>

效果图

总结

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

组件功能

  • 点击展开和收起
  • 是否展开全部

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
uniapp动态修改元素节点样式详解发布时间:2022-02-05
下一篇:
vue开发树形结构组件(组件递归)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap