样式修改

src/assets/json/authMenuList.json

@@ -34,7 +34,7 @@
         {
           "path": "/alarm/allData",
           "name": "allData",
-          "component": "/proTable/useProTable/index",
+          "component": "/proTable/useTreeFilter/index",
           "meta": {
             "title": "全网实时数据监测报警",
             "isLink": "",

src/components/ProTable/index.vue

@@ -33,6 +33,7 @@
     </div>
     <!-- 表格主体 -->
     <el-table
+      stripe
       ref="tableRef"
       v-bind="$attrs"
       :id="uuid"
@@ -48,7 +49,7 @@
         <el-table-column
           v-if="item.type && columnTypes.includes(item.type)"
           v-bind="item"
-          :align="item.align ?? 'center'"
+          :align="item.align ?? 'left'"
           :reserve-selection="item.type == 'selection'"
         >
           <template #default="scope">

src/layouts/components/Menu/SubMenu.vue

@@ -92,7 +92,7 @@ const getCustomIcon = (iconName: string) => {
   .is-active {
     .el-sub-menu__title {
       color: #ffffff !important;
-      background-color: var(--el-color-primary) !important;
+      //background-color: var(--el-color-primary) !important;
     }
   }
 }

src/layouts/components/ThemeDrawer/index.vue

@@ -1,11 +1,11 @@
 <template>
   <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
     <!-- 布局样式 -->
-    <el-divider class="divider" content-position="center">
+    <el-divider class="divider" content-position="center" v-if="false">
       <el-icon><Notification /></el-icon>
       布局样式
     </el-divider>
-    <div class="layout-box">
+    <div class="layout-box" v-if="false">
       <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
         <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
           <div class="layout-dark"></div>
@@ -50,7 +50,7 @@
         </div>
       </el-tooltip>
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>
         侧边栏反转色
         <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
@@ -59,7 +59,7 @@
       </span>
       <el-switch v-model="asideInverted" @change="setAsideTheme" />
     </div>
-    <div class="theme-item mb50">
+    <div class="theme-item mb50" v-if="false">
       <span>
         头部反转色
         <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
@@ -74,7 +74,7 @@
       <el-icon><ColdDrink /></el-icon>
       全局主题
     </el-divider>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>主题颜色</span>
       <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
     </div>
@@ -100,7 +100,7 @@
       <span>菜单折叠</span>
       <el-switch v-model="isCollapse" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>菜单手风琴</span>
       <el-switch v-model="accordion" />
     </div>
@@ -108,23 +108,23 @@
       <span>水印</span>
       <el-switch v-model="watermark" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>面包屑</span>
       <el-switch v-model="breadcrumb" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>面包屑图标</span>
       <el-switch v-model="breadcrumbIcon" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>标签栏</span>
       <el-switch v-model="tabs" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>标签栏图标</span>
       <el-switch v-model="tabsIcon" />
     </div>
-    <div class="theme-item">
+    <div class="theme-item" v-if="false">
       <span>页脚</span>
       <el-switch v-model="footer" />
     </div>

src/styles/element.scss

@@ -134,16 +134,32 @@
   // el-table 表格样式
   .el-table {
     flex: 1;
+    border: 1px solid #C7E2FF;
     table {
-      width: 100%;
     }
+    .el-table__header-wrapper {
+      border-bottom: 1px solid #C7E2FF;
+    }
+
+  .el-table__header,
+   .el-table__body {
+      border-color:#C7E2FF;
+    }
+
+   .el-table__cell {
+      border-color: #C7E2FF;
+    }
+
+
     .el-table__header th {
       height: 45px;
-      font-size: 15px;
-      font-weight: bold;
+      font-size: 14px;
+      font-weight: normal;
       color: var(--el-text-color-primary);
-      background: var(--el-fill-color-light);
+      background: #006FE810;
     }
+
+
     .el-table__row {
       height: 45px;
       font-size: 14px;

src/views/proTable/useTreeFilter/index.vue

@@ -84,7 +84,7 @@ const changeTreeFilter = (val: string) => {
 // 表格配置项
 const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { type: "index", label: "#", width: 80 },
-  { prop: "username", label: "用户姓名", width: 120, search: { el: "input" } },
+  { prop: "username", label: "用户姓名", width: 120, search: { el: "input" }, align: "left" },
   {
     prop: "gender",
     label: "性别",
@@ -92,11 +92,12 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
     sortable: true,
     enum: getUserGender,
     search: { el: "select" },
-    fieldNames: { label: "genderLabel", value: "genderValue" }
+    fieldNames: { label: "genderLabel", value: "genderValue" },
+    align: "left"
   },
-  { prop: "idCard", label: "身份证号" },
-  { prop: "email", label: "邮箱" },
-  { prop: "address", label: "居住地址" },
+  { prop: "idCard", label: "身份证号", align: "left" },
+  { prop: "email", label: "邮箱", align: "left" },
+  { prop: "address", label: "居住地址", align: "left" },
   {
     prop: "status",
     label: "用户状态",
@@ -105,9 +106,10 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
     tag: true,
     enum: getUserStatus,
     search: { el: "select" },
-    fieldNames: { label: "userLabel", value: "userStatus" }
+    fieldNames: { label: "userLabel", value: "userStatus" },
+    align: "left"
   },
-  { prop: "createTime", label: "创建时间", width: 180 },
+  { prop: "createTime", label: "创建时间", width: 180, align: "left" },
   { prop: "operation", label: "操作", width: 330, fixed: "right" }
 ]);