设置不同主题下el-table的css样式

src/assets/scss/theme.scss

@@ -65,7 +65,7 @@
   --p-c-9: #f4f7f799;
   --p-fc-1: #ffffff;
   --p-fc-2: #FFFFF3;
-  --p-fc-3: #f15c5c;
+  --p-fc-3: #177ea7;
   --p-bgc-1: #ff8499;
   --p-bgc-2: #fea1b2;
   --p-bsc: 0 1px 3px #ef528533, 0 1px 2px #ef528544;

src/assets/scss/theme/dark.scss

@@ -71,6 +71,19 @@
           }
         }
       }
+      /* 设置el-table的样式*/
+      .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+        color: var(--d-fc-1);
+        background-color: var(--d-bgc-1);
+        border-bottom-color: var(--d-c-2);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--d-bsc-hover);
+        }
+      }
+      .el-button{
+        color: var(--d-fc-3);
+      }
     }
   }
   .zy-scroll{

src/assets/scss/theme/green.scss

@@ -69,6 +69,19 @@
           }
         }
       }
+      /* 设置el-table的样式*/
+      .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+        color: var(--g-fc-1);
+        background-color: var(--g-bgc-1);
+        border-bottom-color: var(--g-c-2);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+        }
+      }
+      .el-button{
+        color: var(--g-fc-3);
+      }
     }
   }
   .zy-scroll{

src/assets/scss/theme/light.scss

@@ -69,6 +69,19 @@
           }
         }
       }
+      /* 设置el-table的样式*/
+      .el-table__header th, .el-table__header tr， .el-table__body td,.el-table__body th{
+        color: var(--l-fc-1);
+        background-color: var(--l-bgc-1);
+        border-bottom-color: var(--l-c-2);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--l-bsc-hover);
+        }
+      }
+      .el-button{
+        color: var(--l-fc-3);
+      }
     }
   }
   .zy-scroll{

src/assets/scss/theme/pink.scss

@@ -68,6 +68,19 @@
           }
         }
       }
+      /* 设置el-table的样式*/
+      .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+        color: var(--p-fc-1);
+        background-color:var(--p-bgc-1);
+        border-bottom-color: var(--p-c-2);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--p-bsc-hover);
+        }
+      }
+      .el-button{
+        color: var(--p-fc-3);
+      }
     }
   }
   .zy-scroll{

src/components/History.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="detail">
+  <div class="detail" id="history">
     <div class="detail-content">
       <div class="detail-body zy-scroll">
        <div class="zy-table" id="history-table">