el-table 封装

src/components/myTable/index.vue

+<template>
+  <div class="table-container">
+    <slot></slot>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.table-container {
+  padding: 10px;
+  ::v-deep {
+    .el-table {
+      color: #fff;
+      background-color: #333333;
+    }
+    .el-table .odd-row {
+      background-color: $item-background-color;
+    }
+    .el-table .even-row {
+      background-color: #000000;
+    }
+    .el-table thead {
+      color: #fff;
+    }
+    .el-table .cell,
+    .el-table--border .el-table__cell:first-child .cell {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+    .el-table .el-table__cell {
+      padding: 0;
+    }
+    .el-table--border .el-table__cell,
+    .el-table__body-wrapper
+      .el-table--border.is-scrolling-left
+      ~ .el-table__fixed {
+      border-right: $border-color;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: $border-color;
+    }
+    .el-table th.el-table__cell {
+      background-color: $item-background-color;
+    }
+    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+      background-color: #333333;
+    }
+    .el-table__empty-block {
+      background-color: #333333;
+    }
+    .el-table__empty-text {
+      color: #fff;
+    }
+    .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
+      background-color: #333333;
+    }
+    .el-table--border,
+    .el-table--group {
+      border: $border-color;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/aiSearch/index.vue

@@ -74,7 +74,7 @@
     </div>
     <div class="data-container">
       <div class="result-title">检索结果</div>
-      <div class="table-container">
+      <MyTable>
         <el-table
           :data="dogs"
           height="750"
@@ -100,7 +100,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </div>
+      </MyTable>
       <div class="pageing">
         <el-pagination
           background
@@ -139,8 +139,9 @@ import { convertMilliSecondToTime, isRope } from "@/utils/timeHelper";
 import MyDialog from "@/components/myDialog/index.vue";
 import Icon from "@/components/Icon/index.vue";
 import MyVideo from "@/components/MyVideo/index.vue";
+import MyTable from "@/components/myTable/index.vue";
 
-@Component({ components: { MyDialog, Icon, MyVideo } })
+@Component({ components: { MyDialog, Icon, MyVideo, MyTable } })
 export default class AiSearch extends BaseVue {
   queryData = {
     beginTime: "",
@@ -347,9 +348,6 @@ export default class AiSearch extends BaseVue {
         height: 100px;
       }
     }
-    .table-container {
-      padding: 10px;
-    }
   }
   .confirm-del {
     font-size: 16px;
@@ -364,19 +362,6 @@ export default class AiSearch extends BaseVue {
   }
 
   ::v-deep {
-    .el-table {
-      color: #fff;
-      background-color: #333333;
-    }
-    .el-table .odd-row {
-      background-color: $item-background-color;
-    }
-    .el-table .even-row {
-      background-color: #000000;
-    }
-    .el-table thead {
-      color: #fff;
-    }
     .el-input__inner {
       color: #d7d7d7;
       background-color: $item-background-color;
@@ -393,51 +378,6 @@ export default class AiSearch extends BaseVue {
       background-color: #a0cfff;
       border-color: #a0cfff;
     }
-    .el-table .cell,
-    .el-table--border .el-table__cell:first-child .cell {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      img {
-        width: 100px;
-        height: 100px;
-      }
-    }
-    .el-table .el-table__cell {
-      padding: 0;
-    }
-    .el-table--border .el-table__cell,
-    .el-table__body-wrapper
-      .el-table--border.is-scrolling-left
-      ~ .el-table__fixed {
-      border-right: $border-color;
-    }
-    .el-table td.el-table__cell,
-    .el-table th.el-table__cell.is-leaf {
-      border-bottom: $border-color;
-    }
-    .el-table th.el-table__cell {
-      background-color: $item-background-color;
-    }
-    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-      background-color: #333333;
-    }
-    .el-table__empty-block {
-      background-color: #333333;
-    }
-    .el-table__empty-text {
-      color: #fff;
-    }
-    .el-table--border::after,
-    .el-table--group::after,
-    .el-table::before {
-      background-color: #333333;
-    }
-    .el-table--border,
-    .el-table--group {
-      border: $border-color;
-    }
     .el-date-editor.el-input,
     .el-date-editor.el-input__inner {
       width: 100%;