From fa55b36d3e4c7b37b043e3663c49f1c1b6123b0e Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 28 Oct 2022 14:27:35 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20table=20=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/RightPanel/index.vue | 2 +-
 src/plugins/vxe-table/index.ts             | 4 ++--
 src/styles/element-plus.scss               | 8 ++++++++
 src/styles/index.scss                      | 2 ++
 src/styles/vxe-table.scss                  | 1 +
 src/views/table/element-plus/index.vue     | 5 +----
 6 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/element-plus.scss

diff --git a/src/layout/components/RightPanel/index.vue b/src/layout/components/RightPanel/index.vue
index 5472748..497c23d 100644
--- a/src/layout/components/RightPanel/index.vue
+++ b/src/layout/components/RightPanel/index.vue
@@ -5,7 +5,7 @@ import { Setting } from "@element-plus/icons-vue"
 const props = defineProps({
   buttonTop: {
     type: Number,
-    default: 250
+    default: 350
   }
 })
 
diff --git a/src/plugins/vxe-table/index.ts b/src/plugins/vxe-table/index.ts
index 72b348a..4af979d 100644
--- a/src/plugins/vxe-table/index.ts
+++ b/src/plugins/vxe-table/index.ts
@@ -22,7 +22,7 @@ VXETable.setup({
     showHeaderOverflow: "tooltip",
     autoResize: true,
     // stripe: false,
-    border: false,
+    border: "inner",
     // round: false,
     emptyText: "暂无数据",
     rowConfig: {
@@ -30,7 +30,7 @@ VXETable.setup({
       isCurrent: true
     },
     columnConfig: {
-      resizable: true
+      resizable: false
     },
     align: "center",
     headerAlign: "center",
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
new file mode 100644
index 0000000..c0bc03d
--- /dev/null
+++ b/src/styles/element-plus.scss
@@ -0,0 +1,8 @@
+/** 自定义 Element Plus 样式 */
+
+.el-table {
+  // 表头
+  th.el-table__cell {
+    background-color: var(--el-fill-color-light) !important;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f44d3b0..92fd550 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,8 @@
 @import "./variables.css";
 // Transition
 @import "./transition.scss";
+// Element Plus
+@import "./element-plus.scss";
 // Vxe Table
 @import "./vxe-table.scss";
 // 注册多主题
diff --git a/src/styles/vxe-table.scss b/src/styles/vxe-table.scss
index a622ec6..79c347d 100644
--- a/src/styles/vxe-table.scss
+++ b/src/styles/vxe-table.scss
@@ -20,6 +20,7 @@
   &--pager-wrapper {
     .vxe-pager {
       height: 70px !important;
+      padding: 0 20px !important;
       &--wrapper {
         @media screen and (max-width: 750px) {
           .vxe-pager--total,
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
index 958e87a..c6e192d 100644
--- a/src/views/table/element-plus/index.vue
+++ b/src/views/table/element-plus/index.vue
@@ -158,7 +158,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
         </div>
       </div>
       <div class="table-wrapper">
-        <el-table :data="tableData" header-cell-class-name="table-header">
+        <el-table :data="tableData">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column prop="username" label="用户名" align="center" />
           <el-table-column prop="roles" label="角色" align="center">
@@ -236,9 +236,6 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
 
 .table-wrapper {
   margin-bottom: 20px;
-  :deep(.table-header) {
-    background-color: var(--el-fill-color-light) !important;
-  }
 }
 
 .pager-wrapper {