style: 优化 table 示例样式

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
   }
 })
 

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",

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;
+  }
+}

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";
 // 注册多主题

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,

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 {