Skip to content

Commit

Permalink
feat(tree): add defaultExpandLevel prop
Browse files Browse the repository at this point in the history
新增defaultExpandLevel属性,指定默认要展开的层级数。-1为默认全部展开(等同于ATree的defaultExpandAll),大于0则展开到指定层级。注意:该属性仅在首次渲染时起作用

close: #672
  • Loading branch information
mynetfan committed May 28, 2021
1 parent 1ae6362 commit 6edca1c
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 4 deletions.
11 changes: 11 additions & 0 deletions src/components/Tree/src/Tree.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
toRaw,
watch,
CSSProperties,
onMounted,
} from 'vue';
import { Tree, Empty } from 'ant-design-vue';
import { TreeIcon } from './TreeIcon';
Expand Down Expand Up @@ -209,6 +210,16 @@
treeDataRef.value = props.treeData as TreeItem[];
});
onMounted(() => {
if (props.defaultExpandLevel === '') return;
const level = parseInt(props.defaultExpandLevel);
if (level === -1) {

This comment has been minimized.

Copy link
@anncwb

anncwb May 29, 2021

Collaborator

这个位置是否可以直接用boolean来判断,不用-1

This comment has been minimized.

Copy link
@mynetfan

mynetfan May 29, 2021

Author Collaborator

主要是因为defaultExpandLevel这种名字字面意思让人联想到数字而不是boolean

This comment has been minimized.

Copy link
@mynetfan

mynetfan May 29, 2021

Author Collaborator

或者在此处也针对官方的defaultExpandAll属性处理一下,否则defaultExpandAll属性起不到应有的作用。

This comment has been minimized.

Copy link
@anncwb

anncwb May 29, 2021

Collaborator

defaultExpandAll 和 defaultExpandLevel应该可以分开处理,有传入defaultExpandAll在调用也行

expandAll(true);
} else if (level > 0) {
state.expandedKeys = filterByLevel(level);
}
});
watchEffect(() => {
state.expandedKeys = props.expandedKeys;
});
Expand Down
4 changes: 4 additions & 0 deletions src/components/Tree/src/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ export const basicProps = {
checkStrictly: propTypes.bool,
clickRowToExpand: propTypes.bool.def(true),
checkable: propTypes.bool.def(false),
defaultExpandLevel: {
type: [String, Number] as PropType<string | number>,
default: '',
},

replaceFields: {
type: Object as PropType<ReplaceFields>,
Expand Down
2 changes: 1 addition & 1 deletion src/views/demo/tree/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const treeData: TreeItem[] = [
title: 'leaf',
key: '0-0-1',
children: [
{ title: 'leaf', key: '0-0-0-0' },
{ title: 'leaf', key: '0-0-0-0', children: [{ title: 'leaf', key: '0-0-0-0-1' }] },
{ title: 'leaf', key: '0-0-0-1' },
],
},
Expand Down
12 changes: 9 additions & 3 deletions src/views/demo/tree/index.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
<template>
<PageWrapper title="Tree基础示例">
<div class="flex">
<BasicTree :treeData="treeData" title="基础示例" class="w-1/3" />
<BasicTree
:treeData="treeData"
title="基础示例,默认展开第一层"
defaultExpandLevel="1"
class="w-1/3"
/>

<BasicTree
:treeData="treeData"
title="可勾选"
title="可勾选,默认全部展开"
:checkable="true"
class="w-1/3 mx-4"
defaultExpandLevel="-1"
@check="handleCheck"
/>

<BasicTree
title="默认展开/勾选示例"
title="指定默认展开/勾选示例"
:treeData="treeData"
:checkable="true"
:expandedKeys="['0-0']"
Expand Down

0 comments on commit 6edca1c

Please sign in to comment.