1

src/components/common/commonTable.vue

@@ -98,6 +98,20 @@
             </template>
           </el-table-column>
         </template>
+        <template #empty>
+          <div class="empty-wrapper">
+            <svg class="empty-icon" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+              <g fill="none" fill-rule="evenodd">
+                <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                <g fill-rule="nonzero" stroke="#d9d9d9">
+                  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v0c0 1.605 1.005 2.931 2.237 2.931h14.752c1.232 0 2.237-1.326 2.237-2.928z" fill="#fafafa"></path>
+                </g>
+              </g>
+            </svg>
+            <p class="empty-text">{{ emptyText }}</p>
+          </div>
+        </template>
       </el-table>
     </div>
 
@@ -562,6 +576,9 @@ const handleNextClick = (val) => {
     height: 46px;
     line-height: 46px;
   }
+  .el-table__empty-block {
+    min-height: 200px;
+  }
   .el-table__body tr.hover-row > td.el-table__cell {
     background-color: var(--el-table-row-hover-bg-color);
   }
@@ -597,4 +614,26 @@ const handleNextClick = (val) => {
   //   }
   // }
 }
+
+.empty-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0 24px;
+
+  .empty-icon {
+    width: 64px;
+    height: 41px;
+    margin-bottom: 12px;
+    opacity: 0.65;
+  }
+
+  .empty-text {
+    margin: 0;
+    font-size: 14px;
+    color: #909399;
+    line-height: 1.6;
+  }
+}
 </style>