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:
夏犀麟 2026-08-27 00:10:12 +08:00
parent 6911b50218
commit f1c20e32e3

View File

@ -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"