antdv(a-tree) 点击展开收起功能

最新推荐文章于 2023-09-06 21:08:55 发布

uuai

最新推荐文章于 2023-09-06 21:08:55 发布

阅读量1.1k

点赞数 2

分类专栏： vue antdv 文章标签： javascript 开发语言 ecmascript vue antdv

本文链接：https://blog.csdn.net/qq_39019768/article/details/126383930

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

antdv

4 篇文章 0 订阅

订阅专栏

<template>
  <a-button @click="expandHandle">点击</a-button>
  <a-tree ref="tree" :tree-data="treeData" 
      :expanded-keys.sync="expandedKeys" :autoExpandParent="defaultExpandAll"
      @select="handleChildNodeCode" :defaultExpandAll="defaultExpandAll">
  </a-tree>
</template>

<script>
   const treeData = [
        {
            title: '0-0',
            key: '0-0',
            children: [
                {
                    title: '0-0-0',
                    key: '0-0-0',
                    children: [
                        { title: '0-0-0-0', key: '0-0-0-0' },
                        { title: '0-0-0-1', key: '0-0-0-1' },
                        { title: '0-0-0-2', key: '0-0-0-2' },
                    ],
                },
                {
                    title: '0-0-1',
                    key: '0-0-1',
                    children: [
                        { title: '0-0-1-0', key: '0-0-1-0' },
                        { title: '0-0-1-1', key: '0-0-1-1' },
                        { title: '0-0-1-2', key: '0-0-1-2' },
                    ],
                },
                {
                    title: '0-0-2',
                    key: '0-0-2',
                },
            ],
        },
        {
            title: '0-1',
            key: '0-1',
            children: [
                { title: '0-1-0-0', key: '0-1-0-0' },
                { title: '0-1-0-1', key: '0-1-0-1' },
                { title: '0-1-0-2', key: '0-1-0-2' },
            ],
        },
        {
            title: '0-2',
            key: '0-2',
        },
    ];

export default({
	data() {
	    return {
	        treeData,
	        expandedKeys: [],
	        keys:[],
	        defaultExpandAll: false,
	    }
	},
	mounted(){
	   let keys = this.getTreeKeys(treeData)
	   this.keys = keys
	},
	methods:{
		 getTreeKeys(treeObj, keys = []) {
		    const childrenData = [];
		    for (let i = 0; i < treeObj.length; i++) {
		        if(treeObj[i].children){
		            keys.push(treeObj[i].key);
		        }
		        if (treeObj[i].children && treeObj[i].children.length) {
		            childrenData.push(...treeObj[i].children);
		        }
		    }
		    if (childrenData.length) {
		        return this.getTreeKeys(childrenData, keys);
		    } else {
		        return keys;
		    }
		},
	
		expandHandle() {
		    this.defaultExpandAll = !this.defaultExpandAll;
		    if(this.defaultExpandAll){
		       this.expandedKeys = this.keys
		    }else {
		        this.expandedKeys = []
		    }
		}
    }
})
</script>