feat(tree): add defaultExpandLevel prop

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

close: #672
This commit is contained in:
无木 2021-05-29 00:48:56 +08:00
parent 1ae636296d
commit 6edca1c19c
4 changed files with 25 additions and 4 deletions

View File

@ -11,6 +11,7 @@
toRaw,
watch,
CSSProperties,
onMounted,
} from 'vue';
import { Tree, Empty } from 'ant-design-vue';
import { TreeIcon } from './TreeIcon';
@ -209,6 +210,16 @@
treeDataRef.value = props.treeData as TreeItem[];
});
onMounted(() => {
if (props.defaultExpandLevel === '') return;
const level = parseInt(props.defaultExpandLevel);
if (level === -1) {
expandAll(true);
} else if (level > 0) {
state.expandedKeys = filterByLevel(level);
}
});
watchEffect(() => {
state.expandedKeys = props.expandedKeys;
});

View File

@ -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>,

View File

@ -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' },
],
},

View File

@ -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']"