style(system/menu): 优化菜单表格展示效果
调整表格展开默认行为,为菜单名称列添加省略和固定宽度,优化表格单元格样式
This commit is contained in:
1 parent
0a8103f33d
commit
2793945385
1 file changed
+15
-2
@@ -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>
|
||||
Reference in new issue
Block a user