style(table): 优化表格样式和布局自适应
- 移除 basic-container 内部 el-card 的无效 box-shadow 样式 - 调整表头单元格高度,增加上下内边距至10px - 保持数据行单元格紧凑,内边距缩小至2px上下 - 改善表格底部空白区域,自适应高度,不再强制填满 - 使表格容器高度自动适应内容尺寸
This commit is contained in:
@@ -600,10 +600,6 @@ export default {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-card) {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// <20><>除 basic-container 卡片内层 el-card 的 padding(规范 4.4)
|
// <20><>除 basic-container 卡片内层 el-card 的 padding(规范 4.4)
|
||||||
:deep(.basic-container__card) > .el-card__body {
|
:deep(.basic-container__card) > .el-card__body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -620,9 +616,26 @@ export default {
|
|||||||
--el-table-row-hover-bg-color: #f5f7fa;
|
--el-table-row-hover-bg-color: #f5f7fa;
|
||||||
--el-table-row-height: 40px;
|
--el-table-row-height: 40px;
|
||||||
|
|
||||||
.el-table__cell {
|
// 表头加高
|
||||||
padding: 1px 0;
|
.el-table__header-wrapper .el-table__cell {
|
||||||
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 数据行保持紧凑
|
||||||
|
.el-table__body .el-table__cell {
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部空白区域自适应:表格 body 不再强制撑满计算高度
|
||||||
|
:deep(.avue-crud .el-table__body-wrapper) {
|
||||||
|
max-height: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 同步让外层表格容器也自适应
|
||||||
|
:deep(.avue-crud .el-table) {
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-table__body tr:nth-child(even) > td.el-table__cell) {
|
:deep(.el-table__body tr:nth-child(even) > td.el-table__cell) {
|
||||||
|
|||||||
Reference in New Issue
Block a user