vue递归实现自定义tree组件

2024-07-29 10:42:01

本文实例为大家分享了vue递归实现自定义tree组件的具体代码，供大家参考，具体内容如下

1. 在tree/index.vue中：

<template>
  <div>
      <ul>
          <item :model='data'></item>
      </ul>
  </div>
</template>

<script>
import Item from './item'
export default {
    components:{
        Item
    },
    data(){
        return{
            data:{
                title:"一级1",
                children:[
                    {
                        title:"二级1-1",
                        children:[
                            {
                                title:"三级1-1-1",
                                children:[
                                    {
                                        title:"四级1-1-1-1",
                                        children:[
                                            {
                                                title:"五级1-1-1-1-1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        title:'二级1-2',
                        children:[
                            {
                                title:"三级1-2-1"
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</script>

2. item.vue组件：

<template>
  <li>
      <div @click="toggle">
          {{model.title}}
          <span v-if="isFolder">[{{open?'-':'+'}}]</span>
      </div>
      <ul v-show="open" v-if="isFolder">
          <item v-for="(child,index) in model.children" :model='child' :key='index'></item>
      </ul>
  </li>
</template>

<script>
export default {
    name:'Item',
    props:{
        model:{
            type:Object,
            required:true
        }
    },
    data(){
        return{
            open:false
        }
    },
    computed:{
        isFolder(){
           return this.model.children && this.model.children.length>0
        }
    },
    methods:{
        toggle(){
            if(this.isFolder) this.open =!this.open
        }
    }
}
</script>

3. 在任意组件中使用：

<template>
  <div class="index">
      <Tree></Tree>
  </div>
</template>

<script>
    import Tree from "@/components/tree"
    components:{
        Tree
    }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js组件tree实现省市多级联动

小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo
如何实现vue的tree组件

前言 Tree一直是大家熟知的组件,做一些大型的后台管理系统都会用到.使用树组件可以完整的展现其中的层级关系,并具有展开收起选择等交互功能. 效果节点可以无限的递归延伸可以展开和收起子节点如果子节点全部选择对应的父节点也应该选中,反之父节点取消选中对应子节点也需要取消选中 API prop传递data属性,来描述所有的节点的信息每个节点的配置描述如下 title: 展示的标题 expand 是否展开节点 checked 是否选中节点 children 子节点以及还有两个event on
Vue使用zTree插件封装树组件操作示例

本文实例讲述了Vue使用zTree插件封装树组件操作.分享给大家供大家参考,具体如下: 1.通过npm安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': reso
在vue中使用vant TreeSelect分类选择组件操作

中文文档:TreeSelect 分类选择效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van
Vue2组件tree实现无限级树形菜单

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
Vue组件tree实现树形菜单

vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

写在前面首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助.这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑.这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度. 开发过程 1.数据仓库-Vuex 2.组件的循环创建-递归组件需求决定了我的技术选型,项目需求是一个中国各级政
Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
vue递归实现自定义tree组件

本文实例为大家分享了vue递归实现自定义tree组件的具体代码,供大家参考,具体内容如下 1. 在tree/index.vue中: <template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { componen
vue如何给自定义的组件绑定点击事件

目录给自定义的组件绑定点击事件给自定义组件添加单击事件给自定义的组件绑定点击事件在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效. 先给cardinfo这个组件绑定一个点击事件 <cardinfo :content="content" :from="from" :ProPortrait="ProPortrait&quo
Element-ui tree组件自定义节点使用方法代码详解

工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否原生滚动条.鼠标移出是否自动隐藏.自定义滚动条尺寸及颜色等功能. 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想. 通过简单的标签写法<v-scroll>...</v-scroll> 即可快速生成一个漂亮的替换原生滚动条. 参数配置 props:
vue 递归组件的简单使用示例

前言递归相信很多同学已经不陌生了,算法中我们经常用递归来解决问题.比如经典的:从一个全为数字的数组中找出其中相加能等于目标数的组合.思路也不难,循环数组取值,不断递归相加,直到满足目标数条件.递归虽然能解决大部分,但弊处在于,很容易写出死循环的代码,导致爆栈.下面以我实际业务场景讲讲递归在vue组件中的应用. 在vue中使用完成一个完整的递归,我个人认为最重要的有两点: 确定好进入递归的条件; 确定好跳出递归的条件; 其中最重要的就是确定什么时候跳出递归.递归组件实际上非常简单,就是 A
vue递归组件实现elementUI多级菜单

本文实例为大家分享了vue递归组件实现elementUI多级菜单的具体代码,供大家参考,具体内容如下先看效果: 一.子组件 <template> <div class="myDiv">  <template v-for="(item,i) in listAll"> <!-- 有c
vue递归实现树形组件

本文实例为大家分享了vue递归实现树形组件的具体代码,供大家参考,具体内容如下 1. 先来看一下效果: 2. 代码部分 (myTree.vue) 图片可以自己引一下自己的图片,或者使用iconfont的css引入. <template> <div class="tree"> <ul class="ul"> <li v-for="(item,index) of tree
vue递归组件实现树形结构

本文实例为大家分享了vue递归组件实现树形结构,供大家参考,具体内容如下一.递归组件什么是递归组件?简单来说就是在组件中内使用组件本身.函数自己调用自己.很多情况下我们呢刷数据的时候,不知道到底这个数据结构是有多少层,那么这个时候我们就用到了递归来实现. 二.先用for来遍历: 父组件中: <template> <div class="home"> <tree :title="list.name" :list=&q

vue递归实现自定义tree组件

相关推荐

随机推荐