37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<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>
|