feat(tree): add defaultExpandLevel prop
新增defaultExpandLevel属性,指定默认要展开的层级数。-1为默认全部展开(等同于ATree的defaultExpandAll),大于0则展开到指定层级。注意:该属性仅在首次渲染时起作用 close: #672
This commit is contained in:
parent
1ae636296d
commit
6edca1c19c
|
|
@ -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' },
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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']"
|
||||
|
|
|
|||
Loading…
Reference in New Issue