改进 使用 Table 显示蜘蛛

src/views/spiders/List.vue

@@ -2,26 +2,38 @@
   <h1>蜘蛛</h1>
   <p>蜘蛛将不定期的查询网页。</p>
 
-  <v-card class="mt-3">
-    <v-list>
-      <v-list-item
+  <v-table theme="dark" class="mt-3">
+    <thead>
+    <tr>
+      <th class="text-left">
+        名称
+      </th>
+      <th class="text-left">
+        状态
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr
       v-for="item in spiders.Spiders"
       :key="item.Id"
     >
+      <td>{{ item.Name }}</td>
+      <td>
+        <span class="text-success" v-if="item.Status == 'up'">
+          <v-icon icon="mdi-check"></v-icon>
+        </span>
+        <span class="text-danger" v-else-if="item.Status == 'down'">
+          <v-icon icon="mdi-close"></v-icon>
+        </span>
+        <span class="text-warning" v-else-if="item.Status == 'unknown'">
+          <v-icon icon="mdi-help"></v-icon>
+        </span>
 
-
-        <template v-slot:append="{ isActive }">
-          <v-list-item-action end>
-            <v-btn rounded="xl" @click.stop="console.log(isActive)">
-              <v-icon>mdi-check</v-icon>
-            </v-btn>
-          </v-list-item-action>
-        </template>
-
-        <v-list-item-title>{{ item.Name }}</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-card>
+      </td>
+    </tr>
+    </tbody>
+  </v-table>
 
   <div class="text-center">
     <v-container>
@@ -47,7 +59,6 @@
 import {theSpiderApi} from "@/plugins/api";
 
 
-
 const page = ref(1);
 const spiders = ref({});
 const loading = ref(false);