FIX+CHG: 修复前端编译错误 + 菜单树形改用官方 t-enhanced-table
- access.ts 删除重复 layoutMap 声明(修复 vite Transform PARSE_ERROR 导致页面报错) - menu/index.vue 树形改官方方案:t-enhanced-table + tree(childrenKey/treeNodeColumnIndex/defaultExpandAll/indent) + 异步数据后 ref.expandAll()(tdesign 文档确认 t-table 不支持 tree,必须 enhanced-table;defaultExpandAll 只在首次渲染生效)
This commit is contained in:
parent
6911b50218
commit
f1c20e32e3
@ -18,20 +18,13 @@ import {
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
const loading = ref(false);
|
||||
// 扁平化后的菜单列表(含 depth 用于缩进展示),避免依赖 t-table 的 tree 渲染
|
||||
const flatList = ref<(MenuNode & { depth: number })[]>([]);
|
||||
// 菜单树(嵌套 children 结构),由 t-enhanced-table 树形模式渲染
|
||||
const tree = ref<MenuNode[]>([]);
|
||||
// t-enhanced-table 实例:异步数据加载完成后手动展开全部节点
|
||||
const tableRef = ref<any>(null);
|
||||
const dialogOpen = ref(false);
|
||||
const editing = ref<null | MenuNode>(null);
|
||||
|
||||
/** 递归将树扁平化为数组,按层级加 depth 字段用于 UI 缩进 */
|
||||
function flatten(nodes: MenuNode[], depth: number, acc: (MenuNode & { depth: number })[] = []): (MenuNode & { depth: number })[] {
|
||||
for (const n of nodes) {
|
||||
acc.push({ ...n, depth });
|
||||
if (n.children?.length) flatten(n.children, depth + 1, acc);
|
||||
}
|
||||
return acc;
|
||||
}
|
||||
|
||||
const form = reactive({
|
||||
parentId: 0,
|
||||
name: '',
|
||||
@ -49,8 +42,10 @@ async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await getMenuTree();
|
||||
// 扁平化:td-table 的 tree 模式在全量注册 TDesign 后渲染不稳定,改为按 depth 缩进的一维列表
|
||||
flatList.value = flatten(data.tree ?? [], 0);
|
||||
tree.value = data.tree ?? [];
|
||||
// 异步数据就绪后手动展开全部节点(defaultExpandAll 只在首次渲染时生效)
|
||||
await nextTick();
|
||||
tableRef.value?.expandAll?.();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@ -138,18 +133,22 @@ onMounted(load);
|
||||
</t-button>
|
||||
</div>
|
||||
|
||||
<t-table
|
||||
<t-enhanced-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:data="flatList"
|
||||
:data="tree"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:tree="{
|
||||
childrenKey: 'children',
|
||||
treeNodeColumnIndex: 0,
|
||||
defaultExpandAll: true,
|
||||
indent: 20,
|
||||
}"
|
||||
>
|
||||
<template #name="{ row }">
|
||||
<span :style="{ paddingLeft: `${row.depth * 20}px` }">
|
||||
<span v-if="row.depth > 0" class="mr-1 text-gray-400">└</span>
|
||||
{{ row.name }}
|
||||
</span>
|
||||
</template>
|
||||
<template #typeText="{ row }">{{ row.type === 1 ? '菜单' : '按钮' }}</template>
|
||||
<template #op="{ row }">
|
||||
@ -181,7 +180,7 @@ onMounted(load);
|
||||
删除
|
||||
</t-button>
|
||||
</template>
|
||||
</t-table>
|
||||
</t-enhanced-table>
|
||||
|
||||
<t-dialog
|
||||
v-model:visible="dialogOpen"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user