diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 57ca6ab..0db1959 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -16,6 +16,8 @@ @use './components/table-toolbar'; @use './components/query-form'; @use './components/search-panel'; +// element样式放最上面,让下面的自定义样式可以覆盖默认样式 +@use 'element-plus/dist/index.css'; @use './vendors/element-plus/primitives'; @use './vendors/element-plus/base'; @use './vendors/element-plus/dialog'; @@ -25,6 +27,7 @@ @use './vendors/element-plus/popper' as element-popper; @use './vendors/element-plus/shell' as element-shell; @use './vendors/element-plus/navigation'; +@use './vendors/element-plus/table'; @use './btn.scss'; @use 'animate.css'; -@use 'element-plus/dist/index.css'; + diff --git a/src/assets/styles/vendors/element-plus/_index.scss b/src/assets/styles/vendors/element-plus/_index.scss new file mode 100644 index 0000000..e3261c2 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_index.scss @@ -0,0 +1,10 @@ +@use './primitives'; +@use './base'; +@use './dialog'; +@use './dropdown'; +@use './form'; +@use './feedback'; +@use './popper' as element-popper; +@use './shell' as element-shell; +@use './navigation'; +@use './table'; \ No newline at end of file diff --git a/src/assets/styles/vendors/element-plus/_table.scss b/src/assets/styles/vendors/element-plus/_table.scss new file mode 100644 index 0000000..20ec2a5 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_table.scss @@ -0,0 +1,37 @@ + +// 覆盖element plus 表格样式 + +.el-table { + border-radius: var(--app-radius-md); + border: 1px solid var(--app-surface-border); + + // 给右上角表头单元格增加右上角圆角 + thead tr:first-child th:last-child { + border-top-right-radius: var(--app-radius-md); + } + + // 给左下角单元格增加左下角圆角 + tbody tr:last-child td:first-child { + border-bottom-left-radius: var(--app-radius-md); + } + + // 给右下角单元格增加右下角圆角 + tbody tr:last-child td:last-child { + border-bottom-right-radius: var(--app-radius-md); + } +} + +// 去掉额外的表格边线,使用表格border +.el-table--border:after, +.el-table--border:before, +.el-table--border .el-table__inner-wrapper:after, +.el-table--border .el-table__inner-wrapper:before, +.el-table__border-left-patch { + display: none; +} + +// 去掉表格右侧和底部边框,使用单元的变宽 +.el-table--fit { + border-bottom: 0; + border-right: 0; +} \ No newline at end of file