fix: tree autoExpandParent bug

feat-css-var
tangjinzhou 2022-03-08 16:57:15 +08:00
parent ee778a2faa
commit ba9c766f31
3 changed files with 68 additions and 31 deletions

View File

@ -134,11 +134,15 @@ exports[`renders ./components/tree-select/demo/suffix.vue correctly 1`] = `
exports[`renders ./components/tree-select/demo/tree-line.vue correctly 1`] = `
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;"><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<!----><span class="ant-switch-inner">treeLine</span>
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner">treeLine</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;"><button type="button" role="switch" aria-checked="false" class="ant-switch">
<!----><span class="ant-switch-inner">showLeafIcon</span>
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner">showLeafIcon</span>
</button></div>
<!---->
<div class="ant-space-item">

View File

@ -304,9 +304,13 @@ exports[`renders ./components/tree/demo/dynamic.vue correctly 1`] = `
exports[`renders ./components/tree/demo/line.vue correctly 1`] = `
<div>
<div style="margin-bottom: 16px;"> showLine: <button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<!----><span class="ant-switch-inner"><!----></span>
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><!----></span>
</button><br><br> showIcon: <button type="button" role="switch" aria-checked="false" class="ant-switch">
<!----><span class="ant-switch-inner"><!----></span>
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><!----></span>
</button></div>
<div role="tree" class="ant-tree ant-tree-icon-hide ant-tree-show-line">
<!---->

View File

@ -25,11 +25,11 @@ import DropIndicator from './DropIndicator';
import {
computed,
defineComponent,
onMounted,
onUnmounted,
reactive,
ref,
shallowRef,
watch,
watchEffect,
} from 'vue';
import initDefaultProps from '../_util/props-util/initDefaultProps';
@ -145,34 +145,63 @@ export default defineComponent({
});
let init = false; // defaultXxxx api,
onMounted(() => {
init = true;
});
// ================ expandedKeys =================
watchEffect(() => {
let keys = expandedKeys.value;
// ================ expandedKeys =================
if (props.expandedKeys !== undefined || (init && props.autoExpandParent)) {
keys =
props.autoExpandParent || (!init && props.defaultExpandParent)
? conductExpandParent(props.expandedKeys, keyEntities.value)
: props.expandedKeys;
} else if (!init && props.defaultExpandAll) {
const cloneKeyEntities = { ...keyEntities.value };
delete cloneKeyEntities[MOTION_KEY];
keys = Object.keys(cloneKeyEntities).map(key => cloneKeyEntities[key].key);
} else if (!init && props.defaultExpandedKeys) {
keys =
props.autoExpandParent || props.defaultExpandParent
? conductExpandParent(props.defaultExpandedKeys, keyEntities.value)
: props.defaultExpandedKeys;
}
// watchEffect(() => {
// let keys = expandedKeys.value;
// // ================ expandedKeys =================
// if (props.expandedKeys !== undefined || (init && props.autoExpandParent)) {
// keys =
// props.autoExpandParent || (!init && props.defaultExpandParent)
// ? conductExpandParent(props.expandedKeys, keyEntities.value)
// : props.expandedKeys;
// } else if (!init && props.defaultExpandAll) {
// const cloneKeyEntities = { ...keyEntities.value };
// delete cloneKeyEntities[MOTION_KEY];
// keys = Object.keys(cloneKeyEntities).map(key => cloneKeyEntities[key].key);
// } else if (!init && props.defaultExpandedKeys) {
// keys =
// props.autoExpandParent || props.defaultExpandParent
// ? conductExpandParent(props.defaultExpandedKeys, keyEntities.value)
// : props.defaultExpandedKeys;
// }
if (keys) {
expandedKeys.value = keys;
}
});
// if (keys) {
// expandedKeys.value = keys;
// }
// });
watch(
[() => props.expandedKeys, () => props.autoExpandParent, keyEntities],
// eslint-disable-next-line @typescript-eslint/no-unused-vars
([_newKeys, newAutoExpandParent], [_oldKeys, oldAutoExpandParent]) => {
let keys = expandedKeys.value;
// ================ expandedKeys =================
if (
props.expandedKeys !== undefined ||
(init && newAutoExpandParent !== oldAutoExpandParent)
) {
keys =
props.autoExpandParent || (!init && props.defaultExpandParent)
? conductExpandParent(props.expandedKeys, keyEntities.value)
: props.expandedKeys;
} else if (!init && props.defaultExpandAll) {
const cloneKeyEntities = { ...keyEntities.value };
delete cloneKeyEntities[MOTION_KEY];
keys = Object.keys(cloneKeyEntities).map(key => cloneKeyEntities[key].key);
} else if (!init && props.defaultExpandedKeys) {
keys =
props.autoExpandParent || props.defaultExpandParent
? conductExpandParent(props.defaultExpandedKeys, keyEntities.value)
: props.defaultExpandedKeys;
}
if (keys) {
expandedKeys.value = keys;
}
init = true;
},
{ immediate: true },
);
// ================ flattenNodes =================
const flattenNodes = computed(() => {