chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: open now effect only current node

Browse source
This commit is contained in:
Methapon Metanipat 2024-09-16 13:25:06 +07:00
parent f7bf9fa91b
commit 4e98eaa95b
1 changed files with 3 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/shared/TreeView.vue
View file

@ -3,6 +3,7 @@ import { Icon } from '@iconify/vue';
import { ref } from 'vue'; import { ref } from 'vue';
type Node = { type Node = {
[key: string]: any; [key: string]: any;
opened?: boolean;
selected?: boolean; selected?: boolean;
children?: Node[]; children?: Node[];
}; };
@ -11,7 +12,6 @@ type Props = {
level?: number; level?: number;
keyTitle?: string; keyTitle?: string;
keySubtitle?: string; keySubtitle?: string;
collapse?: boolean;
expandable?: boolean; expandable?: boolean;
decoration?: { decoration?: {
level?: number; level?: number;
@ -23,7 +23,6 @@ type Props = {
const props = defineProps<Props>(); const props = defineProps<Props>();
const nodes = defineModel<Node[]>('nodes', { required: true }); const nodes = defineModel<Node[]>('nodes', { required: true });
const open = ref<boolean>(!props.collapse);
const dec = props.decoration?.find((v) => v.level === (props.level || 0)); const dec = props.decoration?.find((v) => v.level === (props.level || 0));
</script> </script>
@ -40,7 +39,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
<template v-else> <template v-else>
<div <div
class="item__content row items-center no-wrap" class="item__content row items-center no-wrap"
@click="open = expandable ? !open : open" @click="node.opened = expandable ? !node.opened : node.opened"
> >
<label class="flex items-center item__checkbox" @click.stop> <label class="flex items-center item__checkbox" @click.stop>
<input type="checkbox" v-model="node.selected" /> <input type="checkbox" v-model="node.selected" />
@ -68,7 +67,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
<transition name="slide"> <transition name="slide">
<div <div
class="q-pl-lg q-pt-sm" class="q-pl-lg q-pt-sm"
v-if="open && node.children && node.children.length > 0" v-if="node.opened && node.children && node.children.length > 0"
> >
<TreeView <TreeView
class="item__children" class="item__children"