doc: tree add accordion demo

close #4849

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/tree/demo/accordion.vue correctly 1`] = `
+<div role="tree" class="ant-tree ant-tree-icon-hide">
+  <!---->
+  <div><input style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;" tabindex="0" aria-label="for screen reader"></div>
+  <div class="ant-tree-treenode" aria-hidden="true" style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;">
+    <div class="ant-tree-indent">
+      <div class="ant-tree-indent-unit"></div>
+    </div>
+  </div>
+  <div style="position: relative;" class="ant-tree-list">
+    <div class="ant-tree-list-holder">
+      <div>
+        <div style="display: flex; flex-direction: column;" class="ant-tree-list-holder-inner">
+          <div class="ant-tree-treenode ant-tree-treenode-switcher-close"><span aria-hidden="true" class="ant-tree-indent"></span><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
+            <!----><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><!----><span class="ant-tree-title">parent 1</span>
+            <!----></span>
+          </div>
+          <div class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"><span aria-hidden="true" class="ant-tree-indent"></span><span class="ant-tree-switcher ant-tree-switcher_close"><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-tree-switcher-icon"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
+            <!----><span title="" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><!----><span class="ant-tree-title">parent 2</span>
+            <!----></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tree/demo/basic.vue correctly 1`] = `
 <div role="tree" class="ant-tree ant-tree-icon-hide">
   <!---->

components/tree/demo/accordion.vue

@@ -0,0 +1,106 @@
+<docs>
+---
+order: 0
+title:
+  zh-CN: 手风琴模式
+  en-US: Accordion
+---
+
+## zh-CN
+
+同一级的节点，每次只能展开一个
+
+## en-US
+
+Nodes of the same level can only be expanded one
+
+</docs>
+<template>
+  <a-tree
+    v-model:selectedKeys="selectedKeys"
+    :expanded-keys="expandedKeys"
+    :tree-data="treeData"
+    @expand="handleExpand"
+  >
+    <template #title="{ title, key }">
+      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
+      <template v-else>{{ title }}</template>
+    </template>
+  </a-tree>
+</template>
+<script lang="ts">
+import type { TreeProps } from 'ant-design-vue';
+import _ from 'lodash';
+import { defineComponent, ref, watch } from 'vue';
+
+const treeData: TreeProps['treeData'] = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [
+          { title: 'leaf', key: '0-0-0-0' },
+          { title: 'leaf', key: '0-0-0-1' },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{ key: '0-0-1-0', title: 'sss' }],
+      },
+    ],
+  },
+  {
+    title: 'parent 2',
+    key: '1-0',
+    children: [
+      {
+        title: 'parent 2-0',
+        key: '1-0-0',
+      },
+      {
+        title: 'parent 2-1',
+        key: '2-0-1',
+      },
+    ],
+  },
+];
+
+export default defineComponent({
+  setup() {
+    const expandedKeys = ref<string[]>([]);
+    const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+    watch(expandedKeys, () => {
+      console.log('expandedKeys', expandedKeys);
+    });
+    watch(selectedKeys, () => {
+      console.log('selectedKeys', selectedKeys);
+    });
+    watch(checkedKeys, () => {
+      console.log('checkedKeys', checkedKeys);
+    });
+    const handleExpand = (keys: string[], { expanded, node }) => {
+      // node.parent add from 3.0.0-alpha.10
+      const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(
+        ({ key }) => key,
+      );
+      if (expanded) {
+        expandedKeys.value = _.difference(keys, tempKeys).concat(node.key);
+      } else {
+        expandedKeys.value = keys;
+      }
+    };
+    return {
+      treeData,
+      expandedKeys,
+      selectedKeys,
+      checkedKeys,
+      handleExpand,
+    };
+  },
+});
+</script>

components/tree/demo/index.vue

@@ -11,6 +11,7 @@
     <replace-fields />
     <context-menu />
     <virtual-scroll />
+    <accordion />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -25,6 +26,7 @@ import SwitcherIcon from './switcher-icon.vue';
 import ReplaceFields from './replaceFields.vue';
 import ContextMenu from './context-menu.vue';
 import VirtualScroll from './virtual-scroll.vue';
+import Accordion from './accordion.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -44,6 +46,7 @@ export default defineComponent({
     ReplaceFields,
     ContextMenu,
     VirtualScroll,
+    Accordion,
   },
   setup() {
     return {};