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,
|
toRaw,
|
||||||
watch,
|
watch,
|
||||||
CSSProperties,
|
CSSProperties,
|
||||||
|
onMounted,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import { Tree, Empty } from 'ant-design-vue';
|
import { Tree, Empty } from 'ant-design-vue';
|
||||||
import { TreeIcon } from './TreeIcon';
|
import { TreeIcon } from './TreeIcon';
|
||||||
|
|
@ -209,6 +210,16 @@
|
||||||
treeDataRef.value = props.treeData as TreeItem[];
|
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(() => {
|
watchEffect(() => {
|
||||||
state.expandedKeys = props.expandedKeys;
|
state.expandedKeys = props.expandedKeys;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,10 @@ export const basicProps = {
|
||||||
checkStrictly: propTypes.bool,
|
checkStrictly: propTypes.bool,
|
||||||
clickRowToExpand: propTypes.bool.def(true),
|
clickRowToExpand: propTypes.bool.def(true),
|
||||||
checkable: propTypes.bool.def(false),
|
checkable: propTypes.bool.def(false),
|
||||||
|
defaultExpandLevel: {
|
||||||
|
type: [String, Number] as PropType<string | number>,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
|
||||||
replaceFields: {
|
replaceFields: {
|
||||||
type: Object as PropType<ReplaceFields>,
|
type: Object as PropType<ReplaceFields>,
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ export const treeData: TreeItem[] = [
|
||||||
title: 'leaf',
|
title: 'leaf',
|
||||||
key: '0-0-1',
|
key: '0-0-1',
|
||||||
children: [
|
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' },
|
{ title: 'leaf', key: '0-0-0-1' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<PageWrapper title="Tree基础示例">
|
<PageWrapper title="Tree基础示例">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<BasicTree :treeData="treeData" title="基础示例" class="w-1/3" />
|
<BasicTree
|
||||||
|
:treeData="treeData"
|
||||||
|
title="基础示例,默认展开第一层"
|
||||||
|
defaultExpandLevel="1"
|
||||||
|
class="w-1/3"
|
||||||
|
/>
|
||||||
|
|
||||||
<BasicTree
|
<BasicTree
|
||||||
:treeData="treeData"
|
:treeData="treeData"
|
||||||
title="可勾选"
|
title="可勾选,默认全部展开"
|
||||||
:checkable="true"
|
:checkable="true"
|
||||||
class="w-1/3 mx-4"
|
class="w-1/3 mx-4"
|
||||||
|
defaultExpandLevel="-1"
|
||||||
@check="handleCheck"
|
@check="handleCheck"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<BasicTree
|
<BasicTree
|
||||||
title="默认展开/勾选示例"
|
title="指定默认展开/勾选示例"
|
||||||
:treeData="treeData"
|
:treeData="treeData"
|
||||||
:checkable="true"
|
:checkable="true"
|
||||||
:expandedKeys="['0-0']"
|
:expandedKeys="['0-0']"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue