fix: 修复 Material Design 样式未生效问题
- 移除 el-table 的 border 属性 - 增强 CSS 选择器优先级 - 添加 !important 覆盖 Element UI 默认样式 - 移除所有单元格边框 - 添加 overflow: hidden 确保圆角效果
This commit is contained in:
@@ -3,7 +3,6 @@
|
|||||||
<el-table
|
<el-table
|
||||||
:data="dataList"
|
:data="dataList"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
border
|
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<!-- 项目名称(含描述) -->
|
<!-- 项目名称(含描述) -->
|
||||||
@@ -245,9 +244,10 @@ export default {
|
|||||||
// 表格整体样式 - Material Design 卡片式
|
// 表格整体样式 - Material Design 卡片式
|
||||||
:deep(.el-table) {
|
:deep(.el-table) {
|
||||||
// 移除边框,使用阴影
|
// 移除边框,使用阴影
|
||||||
border: none;
|
border: none !important;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
// 悬停时卡片阴影加深
|
// 悬停时卡片阴影加深
|
||||||
transition: box-shadow 0.3s ease;
|
transition: box-shadow 0.3s ease;
|
||||||
@@ -257,8 +257,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 表头样式 - 扁平化,无背景色
|
// 表头样式 - 扁平化,无背景色
|
||||||
th {
|
th.el-table__cell {
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -266,16 +266,18 @@ export default {
|
|||||||
padding: 16px 12px;
|
padding: 16px 12px;
|
||||||
|
|
||||||
// 只保留底部一条分隔线
|
// 只保留底部一条分隔线
|
||||||
border-bottom: 2px solid #e0e0e0;
|
border-bottom: 2px solid #e0e0e0 !important;
|
||||||
|
border-right: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 数据行样式 - 增加留白,移除分隔线
|
// 数据行样式 - 增加留白,移除分隔线
|
||||||
td {
|
td.el-table__cell {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
padding: 20px 12px;
|
padding: 20px 12px;
|
||||||
border-bottom: none;
|
border-bottom: none !important;
|
||||||
|
border-right: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移除列分隔线
|
// 移除列分隔线
|
||||||
@@ -289,7 +291,7 @@ export default {
|
|||||||
.el-table__row {
|
.el-table__row {
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
&:hover > td {
|
&:hover > td.el-table__cell {
|
||||||
background-color: #fafafa !important;
|
background-color: #fafafa !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -297,7 +299,12 @@ export default {
|
|||||||
// 移除额外边框
|
// 移除额外边框
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除 inner border
|
||||||
|
.el-table__inner-wrapper::before {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user