style(system/menu): 优化菜单表格展示效果

调整表格展开默认行为,为菜单名称列添加省略和固定宽度,优化表格单元格样式
This commit is contained in:
andyesfly committed 2026-08-19 14:52:30 +08:00
1 parent 0a8103f33d
commit 2793945385
1 file changed
+15 -2
+15 -2
View File
@@ -13,8 +13,11 @@
:data-source="menuList"
:loading="loading"
:pagination="false"
:default-expand-all-rows="true"
row-key="id"
:expandable="{
defaultExpandAllRows: false,
showExpandColumn: true,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'menuType'">
@@ -148,7 +151,7 @@ const loading = ref(false);
const menuList = ref<MenuItem[]>([]);
const columns = [
{ title: '菜单名称', dataIndex: 'menuName', key: 'menuName' },
{ title: '菜单名称', dataIndex: 'menuName', key: 'menuName', width: 120, ellipsis: true },
{ title: '路由路径', dataIndex: 'menuPath', key: 'menuPath', width: 160 },
{ title: '组件', dataIndex: 'component', key: 'component', width: 180 },
{ title: '图标', dataIndex: 'icon', key: 'icon', width: 120 },
@@ -331,5 +334,15 @@ async function handleDelete(record: MenuItem) {
:deep(.ant-btn-link) {
padding: 0 4px;
}
:deep(.ant-table-row-expand-icon) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:deep(.ant-table-cell) {
white-space: nowrap;
}
}
</style>