33 lines
916 B
Vue
33 lines
916 B
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">
|
|
<G3Tree v-model:checked-keys="linked" :tree-data="treeData" checkable default-expand-all block-node />
|
|
</div>
|
|
|
|
<div style="width: 240px">
|
|
<G3Tree v-model:checked-keys="strict" :tree-data="treeData" checkable check-strictly default-expand-all block-node />
|
|
</div>
|
|
</G3Space>
|
|
</template>
|