From 06ccad9db0b62af7f3419cacc48370c7a18da8ce Mon Sep 17 00:00:00 2001 From: Netfan Date: Mon, 31 Mar 2025 10:18:35 +0800 Subject: [PATCH] fix: vbenTree modelValue synchronization (#5825) --- .../ui-kit/shadcn-ui/src/ui/tree/tree.vue | 28 ++++++------------- .../ui-kit/shadcn-ui/src/ui/tree/types.ts | 2 -- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue index 295eff95..67efb697 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue @@ -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(), { expanded: () => [], iconField: 'icon', labelField: 'label', - modelValue: () => [], multiple: false, showIcon: true, transition: true, @@ -38,7 +36,6 @@ const props = withDefaults(defineProps(), { const emits = defineEmits<{ expand: [value: FlattenedItem>]; select: [value: FlattenedItem>]; - 'update:modelValue': [value: Arrayable>]; }>(); interface InnerFlattenItem, P = number | string> { @@ -76,11 +73,7 @@ function flatten, P = number | string>( } const flattenData = ref>([]); -const modelValue = useVModel(props, 'modelValue', emits, { - deep: true, - defaultValue: props.defaultValue ?? [], - passive: (props.modelValue === undefined) as false, -}); +const modelValue = defineModel>(); const expanded = ref>(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>) { @@ -173,13 +170,6 @@ function onSelect(item: FlattenedItem>, 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); } diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts index cb4e82da..5c394f0d 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts +++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts @@ -27,8 +27,6 @@ export interface TreeProps { iconField?: string; /** label字段 */ labelField?: string; - /** 当前值 */ - modelValue?: Arrayable; /** 是否多选 */ multiple?: boolean; /** 显示由iconField指定的图标 */