iter(g61): tree 支持勾选多选与父子级联

This commit is contained in:
HIsheR
2026-10-26 12:26:46 +08:00
parent 0dd0f50985
commit f56ca51cb0
7 changed files with 140 additions and 44 deletions
+20
View File
@@ -200,6 +200,7 @@ const permPick = signal<string[]>(['read']); // 多选组选中值(外部受
const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值(外部受控演示)
const dateVal = signal('2026-10-26'); // 日期选择值(外部受控演示)
const acValue = signal(''); // 自动补全输入值(外部受控演示)
const treeChecked = signal<string[]>(['core']); // 多选树勾选集合(外部受控演示)
const treePick = signal('core'); // 树形选中节点 key
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合(外部受控演示)
const cityPick = signal(''); // 可搜索下拉的选中城市
@@ -673,6 +674,25 @@ const content = h(
onSelect: (n) => treePick(n.key),
}),
h('span', { class: 'out' }, () => (treePick() ? `已选节点:${treePick()}` : '未选中节点')),
h(
'div',
{ class: 'col' },
tree({
multi: true,
checked: treeChecked,
defaultExpandAll: true,
nodes: [
{ key: 'perm', label: '权限包', children: [
{ key: 'read', label: '读取' },
{ key: 'write', label: '写入' },
{ key: 'admin', label: '管理(不可授予)', disabled: true },
] },
{ key: 'bill', label: '计费模块', children: [{ key: 'bill-view', label: '查看账单' }] },
],
onCheck: (keys) => toast.info(`已勾选 ${keys.length} 项`),
}),
h('span', { class: 'out' }, () => `已勾选:${treeChecked().join(' / ') || '无'}`),
),
),
),
section(