服务状态添加颜色区分

src/views/etcd/index.vue

@@ -28,7 +28,7 @@
         <el-table-column prop="exe_path" label="服务路径"> </el-table-column>
         <el-table-column label="服务状态">
           <template #default="scope">
-            {{ setStatusText(scope.row) }}
+            <span :class="`serve-text ${'status-color'+scope.row.state}`">{{ setStatusText(scope.row) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="350" align="center">
@@ -126,7 +126,7 @@ export default {
     // status对应中文
     setStatusText(row) {
       const item = this.statusList.find((e) => e.key == row.state);
-      return item.value || "";
+      return item.value || '';
     },
     // 显示添加界面
     handleAdd() {
@@ -219,3 +219,21 @@ export default {
   },
 };
 </script>
+<style scoped>
+  .serve-text{
+    color: #FFFFFF;
+    padding: 5px 10px;
+  }
+  .status-color0{
+    background: #f95450;
+  }
+  .status-color1{
+    background: #2e94bc;
+  }
+  .status-color2{
+    background: #4e75bc;
+  }
+  .status-color2{
+    background: #f7c139;
+  }
+</style>