提交 6edca1c1 作者: 无木

feat(tree): add defaultExpandLevel prop

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

close: #672
上级 1ae63629
......@@ -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;
});
......
......@@ -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>,
......
......@@ -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' },
],
},
......
<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']"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论