Commit 6edca1c19c3b0772f9ab82a7b09251a74fff2173

Authored by 无木
1 parent 1ae63629

feat(tree): add defaultExpandLevel prop

新增defaultExpandLevel属性,指定默认要展开的层级数。-1为默认全部展开(等同于ATree的defaultExpandAll),大于0则展开到指定层级。注意:该属性仅在首次渲染时起作用

close: #672
src/components/Tree/src/Tree.vue
@@ -11,6 +11,7 @@ @@ -11,6 +11,7 @@
11 toRaw, 11 toRaw,
12 watch, 12 watch,
13 CSSProperties, 13 CSSProperties,
  14 + onMounted,
14 } from 'vue'; 15 } from 'vue';
15 import { Tree, Empty } from 'ant-design-vue'; 16 import { Tree, Empty } from 'ant-design-vue';
16 import { TreeIcon } from './TreeIcon'; 17 import { TreeIcon } from './TreeIcon';
@@ -209,6 +210,16 @@ @@ -209,6 +210,16 @@
209 treeDataRef.value = props.treeData as TreeItem[]; 210 treeDataRef.value = props.treeData as TreeItem[];
210 }); 211 });
211 212
  213 + onMounted(() => {
  214 + if (props.defaultExpandLevel === '') return;
  215 + const level = parseInt(props.defaultExpandLevel);
  216 + if (level === -1) {
  217 + expandAll(true);
  218 + } else if (level > 0) {
  219 + state.expandedKeys = filterByLevel(level);
  220 + }
  221 + });
  222 +
212 watchEffect(() => { 223 watchEffect(() => {
213 state.expandedKeys = props.expandedKeys; 224 state.expandedKeys = props.expandedKeys;
214 }); 225 });
src/components/Tree/src/props.ts
@@ -23,6 +23,10 @@ export const basicProps = { @@ -23,6 +23,10 @@ export const basicProps = {
23 checkStrictly: propTypes.bool, 23 checkStrictly: propTypes.bool,
24 clickRowToExpand: propTypes.bool.def(true), 24 clickRowToExpand: propTypes.bool.def(true),
25 checkable: propTypes.bool.def(false), 25 checkable: propTypes.bool.def(false),
  26 + defaultExpandLevel: {
  27 + type: [String, Number] as PropType<string | number>,
  28 + default: '',
  29 + },
26 30
27 replaceFields: { 31 replaceFields: {
28 type: Object as PropType<ReplaceFields>, 32 type: Object as PropType<ReplaceFields>,
src/views/demo/tree/data.ts
@@ -10,7 +10,7 @@ export const treeData: TreeItem[] = [ @@ -10,7 +10,7 @@ export const treeData: TreeItem[] = [
10 title: 'leaf', 10 title: 'leaf',
11 key: '0-0-1', 11 key: '0-0-1',
12 children: [ 12 children: [
13 - { title: 'leaf', key: '0-0-0-0' }, 13 + { title: 'leaf', key: '0-0-0-0', children: [{ title: 'leaf', key: '0-0-0-0-1' }] },
14 { title: 'leaf', key: '0-0-0-1' }, 14 { title: 'leaf', key: '0-0-0-1' },
15 ], 15 ],
16 }, 16 },
src/views/demo/tree/index.vue
1 <template> 1 <template>
2 <PageWrapper title="Tree基础示例"> 2 <PageWrapper title="Tree基础示例">
3 <div class="flex"> 3 <div class="flex">
4 - <BasicTree :treeData="treeData" title="基础示例" class="w-1/3" /> 4 + <BasicTree
  5 + :treeData="treeData"
  6 + title="基础示例,默认展开第一层"
  7 + defaultExpandLevel="1"
  8 + class="w-1/3"
  9 + />
5 10
6 <BasicTree 11 <BasicTree
7 :treeData="treeData" 12 :treeData="treeData"
8 - title="可勾选" 13 + title="可勾选,默认全部展开"
9 :checkable="true" 14 :checkable="true"
10 class="w-1/3 mx-4" 15 class="w-1/3 mx-4"
  16 + defaultExpandLevel="-1"
11 @check="handleCheck" 17 @check="handleCheck"
12 /> 18 />
13 19
14 <BasicTree 20 <BasicTree
15 - title="默认展开/勾选示例" 21 + title="指定默认展开/勾选示例"
16 :treeData="treeData" 22 :treeData="treeData"
17 :checkable="true" 23 :checkable="true"
18 :expandedKeys="['0-0']" 24 :expandedKeys="['0-0']"