u

code/g3soft-libs/docs/examples/tree/checkable.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// checkable：父子联动；checkStrictly 时父子互不影响（右侧）
+import { ref } from 'vue'
+import { G3Space, G3Tree, type TreeNodeData } from '@g3soft/ui'
+
+const treeData: TreeNodeData[] = [
+  {
+    key: 'role',
+    title: '角色权限',
+    children: [
+      { key: 'read', title: '查看' },
+      { key: 'write', title: '编辑' },
+      { key: 'delete', title: '删除' },
+    ],
+  },
+]
+
+const linked = ref<string[]>(['read'])
+const strict = ref<string[]>(['read'])
+</script>
+
+<template>
+  <G3Space :size="32" wrap align="start">
+    <div style="width: 240px">
+      <p style="margin: 0 0 8px; font-size: 13px; color: #6b7280">父子联动（半选会回传）</p>
+      <G3Tree v-model:checked-keys="linked" :tree-data="treeData" checkable default-expand-all block-node />
+      <p style="margin: 8px 0 0; font-size: 12px">checked: {{ linked }}</p>
+    </div>
+
+    <div style="width: 240px">
+      <p style="margin: 0 0 8px; font-size: 13px; color: #6b7280">checkStrictly（互不影响）</p>
+      <G3Tree v-model:checked-keys="strict" :tree-data="treeData" checkable check-strictly default-expand-all block-node />
+      <p style="margin: 8px 0 0; font-size: 12px">checked: {{ strict }}</p>
+    </div>
+  </G3Space>
+</template>