antdvue 展开收起组件

antdvue提供了Tree组件来实现展开收起功能，具体实现方法如下：

1. 在template中引入Tree组件，并绑定数据和事件：

<template>
  <a-tree
    :tree-data="treeData"
    :expanded-keys="expandedKeys"
    :selected-keys="selectedKeys"
    :checkable="true"
    @select="onSelect"
    @check="onCheck"
    @expand="onExpand"
  >
  </a-tree>
</template>

2. 在script中定义数据和事件处理函数：

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node1',
          key: '0-0',
          children: [
            {
              title: 'Child Node1',
              key: '0-0-0',
              children: [
                {
                  title: 'Child Node1-1',
                  key: '0-0-0-0',
                },
                {
                  title: 'Child Node1-2',
                  key: '0-0-0-1',
                },
              ],
            },
            {
              title: 'Child Node2',
              key: '0-0-1',
            },
          ],
        },
        {
          title: 'Node2',
          key: '0-1',
        },
      ],
      expandedKeys: [],
      selectedKeys: [],
    };
  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
      this.selectedKeys = selectedKeys;
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info);
    },
    onExpand(expandedKeys, { expanded: bool, node }) {
      console.log(expandedKeys, bool, node);
      this.expandedKeys = expandedKeys;
    },
  },
};
</script>

3. 在style中定义样式：

<style scoped>
.ant-tree {
  max-height: 300px;
  overflow: auto;
}
</style>