页面修改

src/pages/test.vue

@@ -17,10 +17,29 @@
         </tr>
         <tr>
           <td class="tdLeft">
-            参数：
+            参数列表：
           </td>
           <td class="tdRight">
-            <textarea :rows="3" :cols="50" v-model="Msg" placeholder="请输入参数"></textarea>
+            <table class="parameterList">
+              <tr v-for="(item,index) in parameterList">
+                <td>
+                  参数名:
+                </td>
+                <td>
+                  <input type="text" v-model="item.Name" />
+                </td>
+                <td>
+                  参数值:
+                </td>
+                <td>
+                  <input type="text" v-model="item.Value" />
+                </td>
+                <td>
+                  <a style="cursor:pointer;color:blue;" @click="AddParameter()">新增</a>&nbsp;
+                  <a v-if="index!=0" style="cursor:pointer;color:red;" @click="DeleteParameter(index)">删除</a>
+                </td>
+              </tr>
+            </table>
           </td>
         </tr>
         <tr>
@@ -78,8 +97,11 @@
     },
     data() {
       return {
-        ActionStr: "/Course/",
-        Msg: "",
+        ActionStr: "",
+        parameterList: [{
+          Name: "",
+          Value: ""
+        }],
         ShowMsg: "",
         Result: "",
       };
@@ -99,6 +121,17 @@
       }
     },
     methods: {
+      //新增参数
+      AddParameter() {
+        this.parameterList.push({
+          Name: "",
+          Value: ""
+        });
+      },
+      //删除参数
+      DeleteParameter(index) {
+        this.parameterList.splice(index, 1);
+      },
       ClearMsg(str) {
         //去掉空格
         var result = str.replace(/\ +/g, "");
@@ -112,18 +145,12 @@
         if (this.ActionStr && this.ActionStr != '') {
           var data = {};
           var tempStr = "";
-          if (this.Msg && this.Msg != '') {
-            var tempArray = this.Msg.split(',');
-            if (tempArray && tempArray.length > 0) {
-              for (var i = 0; i < tempArray.length; i++) {
-                if (tempArray[i] && tempArray[i] != '') {
-                  var subArray = tempArray[i].split(':');
-                  if (subArray && subArray.length == 2) {
-                    tempStr += ',' + '"' + this.ClearMsg(subArray[0]) + '":' + this.ClearMsg(subArray[1]);
-                  }
-                }
+          if (this.parameterList && this.parameterList.length > 0) {
+            this.parameterList.forEach(item => {
+              if (item.Name && item.Name != '') {
+                tempStr += ',' + '"' + item.Name + '":"' + item.Value + '"';
               }
-            }
+            })
           }
           if (tempStr && tempStr != '') {
             tempStr = "{" + tempStr.substring(1, tempStr.length) + "}";
@@ -140,6 +167,7 @@
       }
     },
   };
+
 </script>
 
 <style scoped>
@@ -174,4 +202,14 @@
     font-weight: 400;
   }
 
+  .CMD .parameterList {
+    border: none;
+    border-collapse: collapse;
+  }
+
+  .CMD .parameterList tr td {
+    border: none;
+    border-collapse: collapse;
+  }
+
 </style>