style

QMPlusVuePage/src/view/superAdmin/api/api.vue

@@ -19,9 +19,18 @@
       <el-table-column label="api分组" min-width="150" prop="group"></el-table-column>
       <el-table-column label="api简介" min-width="150" prop="description"></el-table-column>
       <el-table-column label="请求" min-width="150" prop="method">
+       
         <template slot-scope="scope">
           <div>
-            {{scope.row.method|methodFiletr}}
+            {{scope.row.method}}
+            <el-tag
+              :key="scope.row.methodFiletr"
+              :type="scope.row.method|tagTypeFiletr"
+               size="mini" 
+              effect="dark">
+              {{scope.row.method|methodFiletr}}
+            </el-tag>
+            <!-- {{scope.row.method|methodFiletr}} -->
           </div>
         </template>
       </el-table-column>
@@ -90,19 +99,23 @@ import infoList from '@/components/mixins/infoList'
 const methodOptions = [
         {
           value: 'POST',
-          label: '创建'
+          label: '创建',
+          type:'success'
         },
         {
           value: 'GET',
-          label: '查看'
+          label: '查看',
+          type:''
         },
         {
           value: 'PUT',
-          label: '更新'
+          label: '更新',
+          type:'warning'
         },
         {
           value: 'DELETE',
-          label: '删除'
+          label: '删除',
+          type:'danger'
         }
       ]
 
@@ -123,7 +136,10 @@ export default {
       type: ''
     }
   },
+  created(){
+  },
   methods: {
+
     //条件搜索前端看此方法
     onSubmit() {
       this.page = 1
@@ -220,7 +236,12 @@ export default {
   filters:{
     methodFiletr(value){
       const target = methodOptions.filter(item=>item.value === value)[0]
-      return target && `${target.label}(${target.value})`
+      // return target && `${target.label}(${target.value})`
+      return target && `${target.label}`
+    },
+    tagTypeFiletr(value){
+      const target = methodOptions.filter(item=>item.value === value)[0]
+      return target && `${target.type}`
     }
   }
 }
@@ -232,4 +253,7 @@ export default {
     float: right;
   }
 }
+.el-tag--mini{
+  margin-left: 5px;
+}
 </style>