style

QMPlusVuePage/package.json

 {
-    "name": "qm-plus-vue-page",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+  "name": "qm-plus-vue-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "element-ui": "^2.12.0",
+    "mavon-editor": "^2.7.7",
+    "node-sass": "^4.12.0",
+    "path": "^0.12.7",
+    "qs": "^6.8.0",
+    "quill": "^1.3.7",
+    "sass-loader": "^8.0.0",
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "spark-md5": "^3.0.1",
+    "vue": "^2.6.10",
+    "vue-particle-line": "^0.1.4",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.1.3",
+    "vuescroll": "^4.14.4",
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "dependencies": {
-        "axios": "^0.19.0",
-        "core-js": "^2.6.5",
-        "element-ui": "^2.12.0",
-        "mavon-editor": "^2.7.7",
-        "node-sass": "^4.12.0",
-        "path": "^0.12.7",
-        "qs": "^6.8.0",
-        "quill": "^1.3.7",
-        "sass-loader": "^8.0.0",
-        "script-ext-html-webpack-plugin": "^2.1.4",
-        "spark-md5": "^3.0.0",
-        "vue": "^2.6.10",
-        "vue-particle-line": "^0.1.4",
-        "vue-quill-editor": "^3.0.6",
-        "vue-router": "^3.1.3",
-        "vuescroll": "^4.14.4",
-        "vuex": "^3.1.1",
-        "vuex-persist": "^2.1.0"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "^3.11.0",
-        "@vue/cli-plugin-eslint": "^3.11.0",
-        "@vue/cli-service": "^3.11.0",
-        "babel-eslint": "^10.0.1",
-        "eslint": "^5.16.0",
-        "eslint-plugin-vue": "^5.0.0",
-        "vue-template-compiler": "^2.6.10"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "rules": {},
-        "parserOptions": {
-            "parser": "babel-eslint"
-        }
-    },
-    "postcss": {
-        "plugins": {
-            "autoprefixer": {}
-        }
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions"
-    ]
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }

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>
\ No newline at end of file