Commit 6edca1c19c3b0772f9ab82a7b09251a74fff2173
1 parent
1ae63629
feat(tree): add defaultExpandLevel prop
新增defaultExpandLevel属性,指定默认要展开的层级数。-1为默认全部展开(等同于ATree的defaultExpandAll),大于0则展开到指定层级。注意:该属性仅在首次渲染时起作用 close: #672
Showing
4 changed files
with
25 additions
and
4 deletions
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']" |