vue递归实现树形组件


Posted in Vue.js onJuly 15, 2022

本文实例为大家分享了vue递归实现树形组件的具体代码,供大家参考,具体内容如下

1. 先来看一下效果:

vue递归实现树形组件

2. 代码部分 (myTree.vue)

图片可以自己引一下自己的图片,或者使用iconfont的css引入。

<template>
    <div class="tree">
        <ul class="ul">
            <li v-for="(item,index) of treeMenu" :key="index">
                <div class="jiantou" @click="changeStatus(index)">
                    <img src="../../assets/right.png" v-if="!scopesDefault[index]===true && item.children">
                    <img src="../../assets/down.png" v-if="scopesDefault[index]===true && item.children ">
                </div>
                <input type="checkbox" @click="checkBox(item)" v-model="item.check">
                <span @click="changeStatus(index)">{{item.label}}</span>
                <div class="subtree">
                    <tree-menu :treeMenu='item.children' v-if="scopesDefault[index]" @selectnode = "selectnode"></tree-menu>
                </div>
            </li>  
        </ul> 
    </div> 
</template>
<script>
    export default{
    name:'treeMenu',
     props:{
        treeMenu:{
            type:Array,
            default:[]
        },
    },
    data(){
        return{
            scopesDefault: [],
            scopes: [], 
            node:[],
            flatTreeMenu:[],
            check:'',
        }
    },
    methods:{
        //展开
        scope() {
            this.treeMenu.forEach((item, index) => {
                this.scopesDefault[index] = false
                if ('children' in item) {
                    this.scopes[index] = true
                    //console.log(item, index)
                } else {
                    this.scopes[index] = false
                }
            })
        },
        changeStatus(index) {
            if (this.scopesDefault[index] == true) {
                this.$set(this.scopesDefault, index, false)
            } else {
                this.$set(this.scopesDefault, index, this.scopes[index])
            }
        },
        //nodelist 深度优先递归
        checkBox(node,nodelist=[]){
            //console.log("start:",node,nodelist)
            if(node!==null){
                nodelist.push(node);
                if(node.children){
                    let children=node.children;
                    for(let i=0;i<children.length;i++){
                        this.checkBox(children[i],nodelist)//递归调用
                        children[i].check = nodelist[0].check==false?true:false;//选中父节点,子节点全选,取消,子节点取消
                    }
                }
            }
            this.node=node;
            this.check=node.check
        },
        selectnode(node){
            this.$emit("selectnode",node);
        }
    },
    watch:{ 
        node:{
            handler(val){
                this.selectnode(val);
            },
            immediate: true
        },
        check:{
            handler(val){
                this.selectnode(this.node);
            },
            immediate: true
        }
    },
    mounted(){
        this.scope(); 
    }
}
</script>
<style lang = "scss" scoped>
.tree{
    .ul{
        margin: 5px 0 5px 0;
        >li{
            .jiantou{
                display: inline-block;
                width: 15px;
                >img{
                position: relative;
                top: 2.0px;
                left: 4px;
                }
            }
            .subtree{
                margin-left: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
            }
        }
    }
}
input[type=checkbox]{
    visibility: hidden;
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    background-color: #fff !important;
    &::after{
        position: absolute;
        top: 0;
        background-color: #fff;
        border: 1px solid #ddd;
        color: #000;
        width: 15px;
        height: 15px;
        display: inline-block;
        visibility: visible;
        padding-left: 0px;
        text-align: center;
        content: ' ';
        border-radius: 3px;
        transition: all linear .1s;
    }
    &:checked::after{
        content: "\2713";
        font-size: 12px;
        background-color: #409eff;
        border: 1px solid #409eff;
        transition: all linear .1s;
        color: #fff;
        font-weight: bold;
    }
}
.check{
    &:checked::after{
        content: "--" !important;
    }
}
</style>

讲解:

1、调用组件:

我这用来一个global.js来控制组件的使用(这个js附在文章末尾了),在component文件夹中建立一个myTree文件夹,里面放同名vue文件(myTree.vue),这样无论在哪里调用这个组件,都可以直接使用<my-tree></my-tree>的方式去调用。

2、组件的方法:

scope():会生成一个数组,里面有根节点是否有子节点,如本代码里设定的数据,会有scopes=[true,true,true]这样的结果。
changeStatus():每点击标题或者箭头,如果当前下标的节点有没有子节点,再将结果动态赋值给scopesDefault[index],将这个值放于dom上控制开关,递归组件。
checkBox():在组件内部实现了点击全选、点击取消全选的功能,递归调用当前方法,将子元素的状态随父元素一起变化。
selectnode():将当前点击的node的节点内容上传到父组件。

3、监听:

同时监听:不同节点的切换、同一个节点的是否选中的切换,监听得到的结果都传到父组件中。

4、组件递归:调用时与父组件相同

3. 使用组件(useMyTree.vue)

<template>
    <div class = "loginModuel">
        <my-tree :treeMenu='tree' @selectnode="selectnode"></my-tree>
    </div>
</template>
<script>
export default{
    data(){
        return{
            msg:"这是登录页面",
            tree:[
                  {
                    id:1,
                    label:"1级目录1",
                    check:false,
                    children:[
                        {
                            id:"1-1",
                            pid:1,
                            label:"1.1目录",
                            check:false
                        },
                        {
                            id:"1-2",
                            pid:1,
                            label:"1.2目录",
                            check:false
                        },
                        {
                            id:"1-3",
                            pid:1,
                            label:"1.3目录",
                            check:false
                        },
                    ]
                },
                {
                  id:2,
                  label:"1级目录2",
                  check:false,
                  children:[
                      {
                          id:"2-1",
                          label:"2.1目录",
                          check:false,
                          pid:2,
                          children:[
                            {
                                id:"2-1-1",
                                pid:'2-1',
                                label:"2.1.1目录",
                                check:false,
                                children:[
                                    {
                                        id:"2-1-1-1",
                                        pid:'2-1-1',
                                        label:"2.1.1.1目录",
                                        check:false,
                                        children:[
                                            {
                                                id:"2-1-1-1-1",
                                                pid:'2-1-1-1',
                                                label:"2.1.1.1.1目录",
                                                check:false,
                                            },
                                            {
                                                id:"2-1-1-1-2",
                                                pid:'2-1-1-1',
                                                label:"2.1.1.1.2目录",
                                                check:false,
                                            },
                                        ]
                                    },
                                ]
                            },
                            {
                                id:"2-1-2",
                                pid:'2-1',
                                label:"2.1.2目录",
                                check:false,
                            },
                            {
                                id:"2-1-3",
                                pid:'2-1',
                                label:"2.1.3目录",
                                check:false,
                            },
                        ]
                      },
                      {
                          id:"2-2",
                          pid:2,
                          label:"2.2目录",
                          check:false
                      }
                  ]
              },//在此继续添加目录
              {
                id:3,
                label:"1级目录3",
                check:false,
                children:[
                    {
                        id:"3-1",
                        pid:3,
                        label:"3.1目录",
                        check:false,
                        children:[
                            {
                                id:"3-1-1",
                                pid:"3-1",
                                label:"3.1.1目录",
                                check:false,
                                children:[
                                    {
                                        id:"3-1-1-1",
                                        pid:"3-1-1",
                                        label:"3.1.1.1目录",
                                        check:false,
                                        children:[
                                            {
                                                id:"3-1-1-1-1",
                                                pid:"3-1-1-1",
                                                label:"3.1.1.1.1目录",
                                                check:false
                                            },
                                        ]
                                    },
                                ]
                            },
                        ]
                    }
                ]
            },
            ],
            plist:[],//此级以上所有父节点列表
            flatTree:[],//tree的平行数据
            node:'',//当前点击的node,
        }
    },
    methods:{
        //将tree树形数据转换为平行数据
        transformData(tree){
            tree.forEach(item=>{
                this.flatTree.push(item);
                item.children && item.children.length>0 ? this.transformData(item.children) : ""
            })
        },
        //子组件传递过来的点击的node的值
        selectnode(node){
            this.node=node;
            this.flatTree=[];
            this.transformData(this.tree);
            if(node.check==false){//这个节点已经被选中,正在点击取消选中
                this.plist=[];//每次点击一个新的节点都将原来plist的内容清空
                this.getParentnode(this.flatTree,node.pid)
            }else{//正在选中
                this.childAllToParent(node,this.flatTree,1);
            }
        },
        //子节点取消选中,拿到此子节点所有的父节点plist
        getParentnode(tree,pid){
            //this.plist=[]
            if(pid!==null){
                tree.forEach(item=>{
                    if(item.id==pid){
                        this.plist.push(item)
                        this.getParentnode(this.flatTree,item.pid)
                    }
                })
            } 
            if(!pid){
                this.plist.forEach(item=>{
                    this.updateParentCheck(this.tree,item)
                })
            }
        },
        //将原数据tree对应id的项的check值改为false
        updateParentCheck(tree,plistItem){
            //console.log("方法updateParentCheck接收的plistItem参数:",plistItem)
            tree.forEach(item=>{
                if(item.id==plistItem.id){
                    item.check=false;
                }
                if(item.id!==plistItem.id && item.children){
                    this.updateParentCheck(item.children,plistItem)
                }
            })
        },
        //子节点全部选中后父节点选中
        childAllToParent(node,flatTree,j){
            let fatherNode='';
            let brotherNode=[];
            this.flatTree.forEach(item=>{
                if(node.pid && node.pid==item.id){
                    fatherNode=item;//找到了父节点--用于改变check的值
                }
            })
            //判断该结点所有的兄弟节点是否全部选中
            flatTree.forEach(item=>{
                if(item.pid && node.pid && item.pid==node.pid){
                    brotherNode.push(item)//找到所有的兄弟节点
                }
            })
            //i为被选中的兄弟节点的个数
            let i=0;
            this.flatTree.forEach(item=>{
                if(node.pid==item.pid && item.check==true){
                    i=i+1;
                }
            })
            //修改父节点的选中值
            if(i==brotherNode.length && fatherNode){
                fatherNode.check=true
            }
            // console.log(`第j次递归 j=${j}`)
            // console.log(`选中的bro=${i},brother的个数:${brotherNode.length}`)
            // console.log("父节点:",fatherNode,"兄弟节点",brotherNode)
            if(fatherNode.pid!==undefined){
                j=j+1;
                this.childAllToParent(fatherNode,this.flatTree,j)
            }
        }
    },
    mounted(){
        this.transformData(this.tree);//数据初始化:将tree树形数据转换为平行数据
        //console.log(this.flatTree)
    }
}
</script>
<style lang = "scss" scoped>
.loginModuel{
    margin-left: 400px;
    margin-top: 100px;
    .tree{
        .ul{
            >li{
                margin: 5px 0 5px 0;
                >img{
                    position: relative;
                    top: 2.4px;
                    left: 4px;
                }
            }
            .ul2{
                >li{
                    position: relative;
                    left: 20px;
                    margin: 5px 0 5px 0;
                    >img{
                        //transition: all ease-in-out 1s;
                        position: relative;
                        top: 2.4px;
                        left: 4px;
                    }
                }
            }
        }
    }
}

input[type=checkbox]{
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    background-color: #fff !important;
    &::after{
        position: absolute;
        top: 0;
        background-color: #fff;
        border: 1px solid #ddd;
        color: #000;
        width: 15px;
        height: 15px;
        display: inline-block;
        visibility: visible;
        padding-left: 0px;
        text-align: center;
        content: ' ';
        border-radius: 3px;
        transition: all linear .1s;
    }
    &:checked::after{
        content: "✓";
        font-size: 12px;
        background-color: #409eff;
        border: 1px solid #409eff;
        transition: all linear .1s;
        color: #fff;
        font-weight: bold;
    }
}
</style>

子组件主要是实现全选和取消全选。由于递归组件的原因,子组件拿不到完整的数据,所以接下来的两个功能:全选后某一个子节点取消选中则父节点取消选中、子节点全选后父节点自觉选中的功能就要在父组件中完成了。

讲解:

1、设值:

树形数据必须有pid属性,用于向上遍历。

2、方法:

transformData():将层级数据转为平行数据,避免后期不停的递归调用消耗时间,平级数据使用一般的循环即可完成。
selectnode():由子组件传递过来的方法,大致分为两个方向:选中、取消选中。选中时实现功能一:子节点全选后父节点自觉选中;取消选中实现功能二:全选后某一个子节点取消选中则父节点取消选中。
getParentnode():用于实现功能二。子节点取消选中后,根据pid,将在它上面级别的所有父节点列表拿到,再由方法updateParentCheck()将父节点的check值全部改为false
childAllToParent():用于实现功能一。递归调用该方法,将操作节点的父节点拿到,根据兄弟节点有相同的pid,拿到兄弟节点的个数,如果兄弟节点中被选中的个数等于兄弟节点的个数,则修改父节点的check值为true,直到到了根节点结束递归。

  • 这个组件实现起来不是很难,只要是心细就能很好的完成。
  • 如果后期需要使用某些数据的话,直接挂到data里就可以。
  • 如果有更好的方法或者存在某些疑问,欢迎小伙伴留言!

附: (global.js => 放于component文件夹下)

import Vue from 'vue';

function capitalizeFirstLetter(string){
    return string.charAt(0).toUpperCase() + string.slice(1);
}
const requireComponent = require.context(
    '.',true,/\.vue$/
    //找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
    const componetConfig = requireComponent(fileName);
    let a = fileName.lastIndexOf('/');
    fileName = '.' + fileName.slice(a);
    const componetName = capitalizeFirstLetter(
        fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )
    Vue.component(componetName,componetConfig.default || componetConfig)
})
  • 由此其实可以实现很多递归组件,如侧边栏。
  • 下面我放一个自己写的侧边栏的动图,方法比这个树形组件要简单些,毕竟不用考虑复选框的值。感兴趣的小伙伴们可以试着实践一下

vue递归实现树形组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
Vue2项目中对百度地图的封装使用详解
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
You might like
php 团购折扣计算公式
2011/11/24 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php车辆违章查询数据示例
2016/10/14 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
Javascript调试工具(下载)
2007/01/09 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Python实现处理管道的方法
2015/06/04 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python 实现倒排索引的方法
2018/12/25 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python装饰器使用实例详解
2019/12/14 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
会计专业导师推荐信
2014/03/08 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
工作会议简报
2015/07/20 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
go xorm框架的使用
2021/05/22 Golang