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 { hasAccessByCodes } = useAccess();
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
// 扁平化后的菜单列表(含 depth 用于缩进展示),避免依赖 t-table 的 tree 渲染
|
// 菜单树(嵌套 children 结构),由 t-enhanced-table 树形模式渲染
|
||||||
const flatList = ref<(MenuNode & { depth: number })[]>([]);
|
const tree = ref<MenuNode[]>([]);
|
||||||
|
// t-enhanced-table 实例:异步数据加载完成后手动展开全部节点
|
||||||
|
const tableRef = ref<any>(null);
|
||||||
const dialogOpen = ref(false);
|
const dialogOpen = ref(false);
|
||||||
const editing = ref<null | MenuNode>(null);
|
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({
|
const form = reactive({
|
||||||
parentId: 0,
|
parentId: 0,
|
||||||
name: '',
|
name: '',
|
||||||
@ -49,8 +42,10 @@ async function load() {
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
const data = await getMenuTree();
|
const data = await getMenuTree();
|
||||||
// 扁平化:td-table 的 tree 模式在全量注册 TDesign 后渲染不稳定,改为按 depth 缩进的一维列表
|
tree.value = data.tree ?? [];
|
||||||
flatList.value = flatten(data.tree ?? [], 0);
|
// 异步数据就绪后手动展开全部节点(defaultExpandAll 只在首次渲染时生效)
|
||||||
|
await nextTick();
|
||||||
|
tableRef.value?.expandAll?.();
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
@ -138,18 +133,22 @@ onMounted(load);
|
|||||||
</t-button>
|
</t-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<t-table
|
<t-enhanced-table
|
||||||
|
ref="tableRef"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:data="flatList"
|
:data="tree"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
|
:tree="{
|
||||||
|
childrenKey: 'children',
|
||||||
|
treeNodeColumnIndex: 0,
|
||||||
|
defaultExpandAll: true,
|
||||||
|
indent: 20,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<template #name="{ row }">
|
<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 }}
|
{{ row.name }}
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
<template #typeText="{ row }">{{ row.type === 1 ? '菜单' : '按钮' }}</template>
|
<template #typeText="{ row }">{{ row.type === 1 ? '菜单' : '按钮' }}</template>
|
||||||
<template #op="{ row }">
|
<template #op="{ row }">
|
||||||
@ -181,7 +180,7 @@ onMounted(load);
|
|||||||
删除
|
删除
|
||||||
</t-button>
|
</t-button>
|
||||||
</template>
|
</template>
|
||||||
</t-table>
|
</t-enhanced-table>
|
||||||
|
|
||||||
<t-dialog
|
<t-dialog
|
||||||
v-model:visible="dialogOpen"
|
v-model:visible="dialogOpen"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user