fix: vbenTree modelValue synchronization (#5825)

This commit is contained in:
Netfan 2025-03-31 10:18:35 +08:00 committed by GitHub
parent 18722ce434
commit 06ccad9db0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 21 deletions

View File

@ -11,7 +11,6 @@ import { onMounted, ref, watchEffect } from 'vue';
import { ChevronRight, IconifyIcon } from '@vben-core/icons';
import { cn, get } from '@vben-core/shared/utils';
import { useVModel } from '@vueuse/core';
import { TreeItem, TreeRoot } from 'radix-vue';
import { Checkbox } from '../checkbox';
@ -27,7 +26,6 @@ const props = withDefaults(defineProps<TreeProps>(), {
expanded: () => [],
iconField: 'icon',
labelField: 'label',
modelValue: () => [],
multiple: false,
showIcon: true,
transition: true,
@ -38,7 +36,6 @@ const props = withDefaults(defineProps<TreeProps>(), {
const emits = defineEmits<{
expand: [value: FlattenedItem<Recordable<any>>];
select: [value: FlattenedItem<Recordable<any>>];
'update:modelValue': [value: Arrayable<Recordable<any>>];
}>();
interface InnerFlattenItem<T = Recordable<any>, P = number | string> {
@ -76,11 +73,7 @@ function flatten<T = Recordable<any>, P = number | string>(
}
const flattenData = ref<Array<InnerFlattenItem>>([]);
const modelValue = useVModel(props, 'modelValue', emits, {
deep: true,
defaultValue: props.defaultValue ?? [],
passive: (props.modelValue === undefined) as false,
});
const modelValue = defineModel<Arrayable<number | string>>();
const expanded = ref<Array<number | string>>(props.defaultExpandedKeys ?? []);
const treeValue = ref();
@ -105,9 +98,13 @@ function getItemByValue(value: number | string) {
function updateTreeValue() {
const val = modelValue.value;
treeValue.value = Array.isArray(val)
? val.map((v) => getItemByValue(v))
: getItemByValue(val);
if (val === undefined) {
treeValue.value = undefined;
} else {
treeValue.value = Array.isArray(val)
? val.map((v) => getItemByValue(v))
: getItemByValue(val);
}
}
function updateModelValue(val: Arrayable<Recordable<any>>) {
@ -173,13 +170,6 @@ function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
modelValue.value.push(p);
}
});
} else {
if (Array.isArray(modelValue.value)) {
const index = modelValue.value.indexOf(get(item.value, props.valueField));
if (index !== -1) {
modelValue.value.splice(index, 1);
}
}
}
updateTreeValue();
emits('select', item);
@ -240,7 +230,7 @@ defineExpose({
@select="
(event) => {
if (event.detail.originalEvent.type === 'click') {
// event.preventDefault();
event.preventDefault();
}
onSelect(item, event.detail.isSelected);
}

View File

@ -27,8 +27,6 @@ export interface TreeProps {
iconField?: string;
/** label字段 */
labelField?: string;
/** 当前值 */
modelValue?: Arrayable<number | string>;
/** 是否多选 */
multiple?: boolean;
/** 显示由iconField指定的图标 */