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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值