diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index 98f2a646d5..fef9f371cb 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -520,6 +520,10 @@ export default {
         this.isSave = false;
         this.removeTab(targetName);
       }
+      if (tab) {
+        tab.splice(0, 1);
+        tab = undefined;
+      }
       if (this.tabs && this.tabs.length === 0) {
         this.refreshAll();
       }
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index fda8a65c6c..425ef3e972 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -621,11 +621,6 @@ export default {
     },
     openOrClose(node) {
       node.expanded = !node.expanded;
-      if (node.expanded) {
-        this.nodeExpand(node.data);
-      } else {
-        this.nodeCollapse(node.data);
-      }
     },
     hideNode(node) {
       node.isLeaf = true;
diff --git a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
index 1e9a5f7470..c975831b8b 100644
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@@ -15,7 +15,15 @@
           <el-row>
             <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
           </el-row>
-          <ms-api-key-value @editScenarioAdvance="editScenarioAdvance" :scenario-definition="scenarioDefinition" :show-desc="true" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :suggestions="headerSuggestions" :items="headers" :need-mock="true"/>
+          <ms-api-key-value
+            @editScenarioAdvance="editScenarioAdvance"
+            :scenario-definition="scenarioDefinition"
+            :show-desc="true"
+            :is-read-only="isReadOnly"
+            :isShowEnable="isShowEnable"
+            :suggestions="headerSuggestions"
+            :items="headers"
+            :need-mock="true" v-if="activeName === 'headers'"/>
         </el-tab-pane>
 
         <!--query 参数-->
@@ -30,7 +38,15 @@
           <el-row>
             <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
           </el-row>
-          <ms-api-variable @editScenarioAdvance="editScenarioAdvance" :scenario-definition="scenarioDefinition" :with-mor-setting="true" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :parameters="request.arguments"/>
+          <ms-api-variable
+            @editScenarioAdvance="editScenarioAdvance"
+            :scenario-definition="scenarioDefinition"
+            :with-mor-setting="true"
+            :is-read-only="isReadOnly"
+            :isShowEnable="isShowEnable"
+            :parameters="request.arguments"
+            v-if="activeName === 'parameters'"
+          />
         </el-tab-pane>
 
         <!--REST 参数-->
@@ -46,12 +62,29 @@
           <el-row>
             <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
           </el-row>
-          <ms-api-variable @editScenarioAdvance="editScenarioAdvance" :scenario-definition="scenarioDefinition" :with-mor-setting="true" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :parameters="request.rest"/>
+          <ms-api-variable
+            @editScenarioAdvance="editScenarioAdvance"
+            :scenario-definition="scenarioDefinition"
+            :with-mor-setting="true"
+            :is-read-only="isReadOnly"
+            :isShowEnable="isShowEnable"
+            :parameters="request.rest"
+            v-if="activeName === 'rest'"
+          />
         </el-tab-pane>
 
         <!--请求体-->
         <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body">
-          <ms-api-body @editScenarioAdvance="editScenarioAdvance" :scenario-definition="scenarioDefinition" @headersChange="reloadBody" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
+          <ms-api-body
+            @editScenarioAdvance="editScenarioAdvance"
+            :scenario-definition="scenarioDefinition"
+            @headersChange="reloadBody"
+            :is-read-only="isReadOnly"
+            :isShowEnable="isShowEnable"
+            :headers="headers"
+            :body="request.body"
+            v-if="activeName === 'body'"
+          />
         </el-tab-pane>
 
         <!-- 认证配置 -->
@@ -60,11 +93,19 @@
             <span>{{ $t('api_test.definition.request.auth_config') }}</span>
           </el-tooltip>
 
-          <ms-api-auth-config :is-read-only="isReadOnly" :request="request"/>
+          <ms-api-auth-config
+            :is-read-only="isReadOnly"
+            :request="request"
+            v-if="activeName === 'authConfig'"
+          />
         </el-tab-pane>
 
         <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="advancedConfig">
-          <ms-api-advanced-config :is-read-only="isReadOnly" :request="request"/>
+          <ms-api-advanced-config
+            :is-read-only="isReadOnly"
+            :request="request"
+            v-if="activeName === 'advancedConfig'"
+          />
         </el-tab-pane>
 
         <!-- 脚本步骤/断言步骤 -->
@@ -75,7 +116,14 @@
               <div class="el-step__icon-inner">{{ request.preSize }}</div>
             </div>
           </span>
-          <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'" ref="preStep"/>
+          <ms-jmx-step
+            :request="request"
+            :apiId="request.id"
+            :response="response"
+            :tab-type="'pre'"
+            ref="preStep"
+            v-if="activeName === 'preOperate'"
+          />
         </el-tab-pane>
         <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate" v-if="showScript">
             <span class="item-tabs" effect="dark" placement="top-start" slot="label">
@@ -84,7 +132,14 @@
               <div class="el-step__icon-inner">{{ request.postSize }}</div>
             </div>
           </span>
-          <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'" ref="postStep"/>
+          <ms-jmx-step
+            :request="request"
+            :apiId="request.id"
+            :response="response"
+            :tab-type="'post'"
+            ref="postStep"
+            v-if="activeName === 'postOperate'"
+          />
         </el-tab-pane>
         <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule" v-if="showScript">
             <span class="item-tabs" effect="dark" placement="top-start" slot="label">
@@ -93,7 +148,14 @@
               <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
             </div>
           </span>
-          <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody" :tab-type="'assertionsRule'" ref="assertionsRule"/>
+          <ms-jmx-step
+            :request="request"
+            :apiId="request.id"
+            :response="response"
+            @reload="reloadBody"
+            :tab-type="'assertionsRule'"
+            ref="assertionsRule"
+            v-if="activeName === 'assertionsRule'"/>
         </el-tab-pane>
 
       </el-tabs>
@@ -239,15 +301,17 @@ export default {
     hasPermission,
     hasLicense,
     tabClick() {
-      if (this.activeName === 'preOperate') {
-        this.$refs.preStep.filter();
-      }
-      if (this.activeName === 'postOperate') {
-        this.$refs.postStep.filter();
-      }
-      if (this.activeName === 'assertionsRule') {
-        this.$refs.assertionsRule.filter();
-      }
+      this.$nextTick(() => {
+        if (this.activeName === 'preOperate' && this.$refs.preStep) {
+          this.$refs.preStep.filter();
+        }
+        if (this.activeName === 'postOperate' && this.$refs.postStep) {
+          this.$refs.postStep.filter();
+        }
+        if (this.activeName === 'assertionsRule' && this.$refs.assertionsRule) {
+          this.$refs.assertionsRule.filter();
+        }
+      });
     },
     generate() {
       if (this.request.body && (this.request.body.jsonSchema || this.request.body.raw)) {
diff --git a/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue b/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
index aeb1d5f119..9903160ef2 100644
--- a/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue
@@ -8,15 +8,15 @@
               <!--query 参数-->
               <el-tab-pane name="parameters">
                 <template v-slot:label>
-                  {{$t('api_test.definition.request.req_param')}}
+                  {{ $t('api_test.definition.request.req_param') }}
                   <ms-instructions-icon :content="$t('api_test.definition.request.tcp_parameter_tip')"/>
                 </template>
-                <ms-api-variable :is-read-only="isReadOnly" :parameters="request.parameters"/>
+                <ms-api-variable :is-read-only="isReadOnly" :parameters="request.parameters" v-if="activeName === 'parameters'"/>
               </el-tab-pane>
 
               <el-tab-pane :label="$t('api_test.definition.request.message_template')" name="request">
                 <div class="send-request">
-                  <ms-code-edit mode="text" :read-only="isReadOnly" :data.sync="request.request" :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
+                  <ms-code-edit v-if="activeName === 'request'" mode="text" :read-only="isReadOnly" :data.sync="request.request" :modes="['text', 'json', 'xml', 'html']" theme="eclipse"/>
                 </div>
               </el-tab-pane>
 
@@ -24,7 +24,7 @@
                 <jsr233-processor-content
                   :jsr223-processor="request.tcpPreProcessor"
                   :is-pre-processor="true"
-                  :is-read-only="isReadOnly"/>
+                  :is-read-only="isReadOnly" v-if="activeName === 'script'"/>
               </el-tab-pane>
 
               <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="other" class="other-config">
@@ -110,256 +110,256 @@
 </template>
 
 <script>
-  import MsApiKeyValue from "../../ApiKeyValue";
-  import MsApiAssertions from "../../assertion/ApiAssertions";
-  import MsApiExtract from "../../extract/ApiExtract";
-  import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
-  import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
-  import MsApiScenarioVariables from "../../ApiScenarioVariables";
-  import {createComponent} from "../../jmeter/components";
-  import {Assertions, Extract} from "../../../model/ApiTestModel";
-  import {parseEnvironment} from "../../../model/EnvironmentModel";
-  import ApiEnvironmentConfig from "../../environment/ApiEnvironmentConfig";
-  import {API_STATUS} from "../../../model/JsonData";
-  import TCPSampler from "../../jmeter/components/sampler/tcp-sampler";
-  import {getCurrentProjectID, getUUID} from "@/common/js/utils";
-  import MsApiVariable from "../../ApiVariable";
-  import MsInstructionsIcon from "../../../../../common/components/MsInstructionsIcon";
-  import Jsr233ProcessorContent from "../../../../automation/scenario/common/Jsr233ProcessorContent";
-  import JSR223PreProcessor from "../../jmeter/components/pre-processors/jsr223-pre-processor";
-  import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";
-  import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
+import MsApiKeyValue from "../../ApiKeyValue";
+import MsApiAssertions from "../../assertion/ApiAssertions";
+import MsApiExtract from "../../extract/ApiExtract";
+import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
+import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
+import MsApiScenarioVariables from "../../ApiScenarioVariables";
+import {createComponent} from "../../jmeter/components";
+import {Assertions, Extract} from "../../../model/ApiTestModel";
+import {parseEnvironment} from "../../../model/EnvironmentModel";
+import ApiEnvironmentConfig from "../../environment/ApiEnvironmentConfig";
+import {API_STATUS} from "../../../model/JsonData";
+import TCPSampler from "../../jmeter/components/sampler/tcp-sampler";
+import {getCurrentProjectID, getUUID} from "@/common/js/utils";
+import MsApiVariable from "../../ApiVariable";
+import MsInstructionsIcon from "../../../../../common/components/MsInstructionsIcon";
+import Jsr233ProcessorContent from "../../../../automation/scenario/common/Jsr233ProcessorContent";
+import JSR223PreProcessor from "../../jmeter/components/pre-processors/jsr223-pre-processor";
+import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";
+import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
-  export default {
-    name: "TcpBasisParameters",
-    components: {
-      ApiDefinitionStepButton,
-      Jsr233ProcessorContent,
-      MsInstructionsIcon,
-      MsApiVariable,
-      MsApiScenarioVariables,
-      MsCodeEdit,
-      ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig
+export default {
+  name: "TcpBasisParameters",
+  components: {
+    ApiDefinitionStepButton,
+    Jsr233ProcessorContent,
+    MsInstructionsIcon,
+    MsApiVariable,
+    MsApiScenarioVariables,
+    MsCodeEdit,
+    ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig
+  },
+  props: {
+    request: {},
+    basisData: {},
+    moduleOptions: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
     },
-    props: {
-      request: {},
-      basisData: {},
-      moduleOptions: Array,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      showScript: {
-        type: Boolean,
-        default: true,
-      },
-      referenced: {
-        type: Boolean,
-        default: false,
-      },
+    showScript: {
+      type: Boolean,
+      default: true,
     },
-    data() {
-      return {
-        activeName: "parameters",
-        classes: TCPSampler.CLASSES,
-        isReloadData: false,
-        options: API_STATUS,
-        currentProjectId: "",
-        connectEncodingArr:[
-          {
-            'key':'UTF-8',
-            'value':'UTF-8',
-          },
-          {
-            'key':'GBK',
-            'value':'GBK',
-          },
-        ],
-        rules: {
-          classname: [{required: true, message: "请选择TCPClient", trigger: 'change'}],
-          server: [{required: true, message: this.$t('api_test.request.tcp.server_cannot_be_empty'), trigger: 'blur'}],
-          port: [{required: true, message: this.$t('commons.port_cannot_be_empty'), trigger: 'change'}],
+    referenced: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeName: "parameters",
+      classes: TCPSampler.CLASSES,
+      isReloadData: false,
+      options: API_STATUS,
+      currentProjectId: "",
+      connectEncodingArr: [
+        {
+          'key': 'UTF-8',
+          'value': 'UTF-8',
         },
-      }
-    },
-    created() {
-      this.currentProjectId = getCurrentProjectID();
-      if (!this.request.parameters) {
-        this.$set(this.request, 'parameters', []);
-        this.request.parameters = [];
-      }
-      if (!this.request.tcpPreProcessor) {
-        this.$set(this.request, 'tcpPreProcessor', new JSR223PreProcessor())
-      }
-      if(this.request.tcpPreProcessor){
-        this.request.tcpPreProcessor.clazzName = TYPE_TO_C.get(this.request.tcpPreProcessor.type);
-      }
-      if(!this.request.connectEncoding){
-        this.request.connectEncoding = "UTF-8";
-      }
-      this.getEnvironments();
-    },
-    methods: {
-      addPre() {
-        let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-        this.request.hashTree.push(jsr223PreProcessor);
-        this.reload();
+        {
+          'key': 'GBK',
+          'value': 'GBK',
+        },
+      ],
+      rules: {
+        classname: [{required: true, message: "请选择TCPClient", trigger: 'change'}],
+        server: [{required: true, message: this.$t('api_test.request.tcp.server_cannot_be_empty'), trigger: 'blur'}],
+        port: [{required: true, message: this.$t('commons.port_cannot_be_empty'), trigger: 'change'}],
       },
-      addPost() {
-        let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-        this.request.hashTree.push(jsr223PostProcessor);
-        this.reload();
-      },
-      addAssertions() {
-        let assertions = new Assertions();
-        this.request.hashTree.push(assertions);
-        this.reload();
-      },
-      addExtract() {
-        let jsonPostProcessor = new Extract();
-        this.request.hashTree.push(jsonPostProcessor);
-        this.reload();
-      },
-      remove(row) {
-        let index = this.request.hashTree.indexOf(row);
-        this.request.hashTree.splice(index, 1);
-        this.reload();
-      },
-      copyRow(row) {
-        let obj =JSON.parse(JSON.stringify(row));
-        obj.id = getUUID();
-        this.request.hashTree.push(obj);
-        this.reload();
-      },
-      reload() {
-        this.isReloadData = true
-        this.$nextTick(() => {
-          this.isReloadData = false
-        })
-      },
-      validateApi() {
-        if (this.currentProjectId === null) {
-          this.$error(this.$t('api_test.select_project'), 2000);
-          return;
-        }
-        this.$refs['basicForm'].validate();
-      },
-      saveApi() {
-        this.basisData.method = this.basisData.protocol;
-        this.$emit('saveApi', this.basisData);
-      },
-      runTest() {
-
-      },
-      validate() {
-        if (this.currentProjectId === null) {
-          this.$error(this.$t('api_test.select_project'), 2000);
-          return;
-        }
-        this.$refs['request'].validate((valid) => {
-          if (valid) {
-            this.$emit('callback');
-          }
-        })
-      },
-      getEnvironments() {
-        if (this.currentProjectId) {
-          this.environments = [];
-          this.$get('/api/environment/list/' + this.currentProjectId, response => {
-            this.environments = response.data;
-            this.environments.forEach(environment => {
-              parseEnvironment(environment);
-            });
-            this.initDataSource();
-          });
-        }
-      },
-      openEnvironmentConfig() {
-        if (!this.currentProjectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        this.$refs.environmentConfig.open(this.currentProjectId);
-      },
-      initDataSource() {
-        for (let i in this.environments) {
-          if (this.environments[i].id === this.request.environmentId) {
-            this.databaseConfigsOptions = [];
-            this.environments[i].config.databaseConfigs.forEach(item => {
-              this.databaseConfigsOptions.push(item);
-            })
-            break;
-          }
-        }
-      },
-      environmentChange(value) {
-        this.request.dataSource = undefined;
-        for (let i in this.environments) {
-          if (this.environments[i].id === value) {
-            this.databaseConfigsOptions = [];
-            this.environments[i].config.databaseConfigs.forEach(item => {
-              this.databaseConfigsOptions.push(item);
-            })
-            break;
-          }
-        }
-      },
-      environmentConfigClose() {
-        this.getEnvironments();
-      }
     }
+  },
+  created() {
+    this.currentProjectId = getCurrentProjectID();
+    if (!this.request.parameters) {
+      this.$set(this.request, 'parameters', []);
+      this.request.parameters = [];
+    }
+    if (!this.request.tcpPreProcessor) {
+      this.$set(this.request, 'tcpPreProcessor', new JSR223PreProcessor())
+    }
+    if (this.request.tcpPreProcessor) {
+      this.request.tcpPreProcessor.clazzName = TYPE_TO_C.get(this.request.tcpPreProcessor.type);
+    }
+    if (!this.request.connectEncoding) {
+      this.request.connectEncoding = "UTF-8";
+    }
+    this.getEnvironments();
+  },
+  methods: {
+    addPre() {
+      let jsr223PreProcessor = createComponent("JSR223PreProcessor");
+      this.request.hashTree.push(jsr223PreProcessor);
+      this.reload();
+    },
+    addPost() {
+      let jsr223PostProcessor = createComponent("JSR223PostProcessor");
+      this.request.hashTree.push(jsr223PostProcessor);
+      this.reload();
+    },
+    addAssertions() {
+      let assertions = new Assertions();
+      this.request.hashTree.push(assertions);
+      this.reload();
+    },
+    addExtract() {
+      let jsonPostProcessor = new Extract();
+      this.request.hashTree.push(jsonPostProcessor);
+      this.reload();
+    },
+    remove(row) {
+      let index = this.request.hashTree.indexOf(row);
+      this.request.hashTree.splice(index, 1);
+      this.reload();
+    },
+    copyRow(row) {
+      let obj = JSON.parse(JSON.stringify(row));
+      obj.id = getUUID();
+      this.request.hashTree.push(obj);
+      this.reload();
+    },
+    reload() {
+      this.isReloadData = true
+      this.$nextTick(() => {
+        this.isReloadData = false
+      })
+    },
+    validateApi() {
+      if (this.currentProjectId === null) {
+        this.$error(this.$t('api_test.select_project'), 2000);
+        return;
+      }
+      this.$refs['basicForm'].validate();
+    },
+    saveApi() {
+      this.basisData.method = this.basisData.protocol;
+      this.$emit('saveApi', this.basisData);
+    },
+    runTest() {
 
+    },
+    validate() {
+      if (this.currentProjectId === null) {
+        this.$error(this.$t('api_test.select_project'), 2000);
+        return;
+      }
+      this.$refs['request'].validate((valid) => {
+        if (valid) {
+          this.$emit('callback');
+        }
+      })
+    },
+    getEnvironments() {
+      if (this.currentProjectId) {
+        this.environments = [];
+        this.$get('/api/environment/list/' + this.currentProjectId, response => {
+          this.environments = response.data;
+          this.environments.forEach(environment => {
+            parseEnvironment(environment);
+          });
+          this.initDataSource();
+        });
+      }
+    },
+    openEnvironmentConfig() {
+      if (!this.currentProjectId) {
+        this.$error(this.$t('api_test.select_project'));
+        return;
+      }
+      this.$refs.environmentConfig.open(this.currentProjectId);
+    },
+    initDataSource() {
+      for (let i in this.environments) {
+        if (this.environments[i].id === this.request.environmentId) {
+          this.databaseConfigsOptions = [];
+          this.environments[i].config.databaseConfigs.forEach(item => {
+            this.databaseConfigsOptions.push(item);
+          })
+          break;
+        }
+      }
+    },
+    environmentChange(value) {
+      this.request.dataSource = undefined;
+      for (let i in this.environments) {
+        if (this.environments[i].id === value) {
+          this.databaseConfigsOptions = [];
+          this.environments[i].config.databaseConfigs.forEach(item => {
+            this.databaseConfigsOptions.push(item);
+          })
+          break;
+        }
+      }
+    },
+    environmentConfigClose() {
+      this.getEnvironments();
+    }
   }
+
+}
 </script>
 
 <style scoped>
-  .tcp >>> .el-input-number {
-    width: 100%;
-  }
+.tcp >>> .el-input-number {
+  width: 100%;
+}
 
-  .send-request {
-    padding: 0px 0;
-    height: 300px;
-    border: 1px #DCDFE6 solid;
-    border-radius: 4px;
-    width: 100%;
-  }
+.send-request {
+  padding: 0px 0;
+  height: 300px;
+  border: 1px #DCDFE6 solid;
+  border-radius: 4px;
+  width: 100%;
+}
 
-  .ms-left-cell {
-    margin-top: 40px;
-  }
+.ms-left-cell {
+  margin-top: 40px;
+}
 
-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}
 
-  /deep/ .el-form-item {
-    margin-bottom: 15px;
-  }
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}
 
-  .ms-left-cell {
-    margin-top: 40px;
-  }
+.ms-left-cell {
+  margin-top: 40px;
+}
 
-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}
 
-  /deep/ .el-form-item {
-    margin-bottom: 15px;
-  }
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}
 
-  /deep/ .instructions-icon {
-    font-size: 14px !important;
-  }
+/deep/ .instructions-icon {
+  font-size: 14px !important;
+}
 
-  .request-tabs {
-    margin: 10px;
-    min-height: 200px;
-  }
+.request-tabs {
+  margin: 10px;
+  min-height: 200px;
+}
 
-  .other-config {
-    padding: 15px;
-  }
+.other-config {
+  padding: 15px;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
index 0eb2e48338..1e991e99ad 100644
--- a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
+++ b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
@@ -2,28 +2,28 @@
   <div class="text-container" v-if="responseResult">
     <el-tabs v-model="activeName" v-show="isActive">
       <el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
-        <ms-sql-result-table v-if="isSqlType" :body="responseResult.body"/>
-        <ms-code-edit v-if="!isSqlType && isMsCodeEditShow" :mode="mode" :read-only="true" :modes="modes" :data.sync="responseResult.body" ref="codeEdit"/>
+        <ms-sql-result-table v-if="isSqlType && activeName === 'body'" :body="responseResult.body"/>
+        <ms-code-edit v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'" :mode="mode" :read-only="true" :modes="modes" :data.sync="responseResult.body" ref="codeEdit"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.headers"/>
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.headers" v-if="activeName === 'headers'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.definition.request.console')" name="console" class="pane">
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.console"/>
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.console" v-if="activeName === 'console'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
-        <ms-assertion-results :assertions="responseResult.assertions"/>
+        <ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.vars"/>
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.vars" v-if="activeName === 'label'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages"/>
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages" v-if="activeName === 'request_body'"/>
       </el-tab-pane>
 
       <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
diff --git a/frontend/src/business/components/api/definition/components/step/JmxStep.vue b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
index 60555c5fad..93b6ed2bbd 100644
--- a/frontend/src/business/components/api/definition/components/step/JmxStep.vue
+++ b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
@@ -257,20 +257,22 @@ export default {
       return false;
     },
     filter() {
-      let vars = [];
-      if (this.tabType === 'pre') {
-        vars = ["JSR223PreProcessor", "JDBCPreProcessor", "ConstantTimer"];
-      } else if (this.tabType === 'post') {
-        vars = ["JSR223PostProcessor", "JDBCPostProcessor", "Extract"];
-      } else {
-        vars = ["Assertions"];
-      }
       this.$nextTick(() => {
-        if (this.$refs.generalSteps && this.$refs.generalSteps.filter) {
-          this.$refs.generalSteps.filter(vars);
+        let vars = [];
+        if (this.tabType === 'pre') {
+          vars = ["JSR223PreProcessor", "JDBCPreProcessor", "ConstantTimer"];
+        } else if (this.tabType === 'post') {
+          vars = ["JSR223PostProcessor", "JDBCPostProcessor", "Extract"];
+        } else {
+          vars = ["Assertions"];
         }
+        this.$nextTick(() => {
+          if (this.$refs.generalSteps && this.$refs.generalSteps.filter) {
+            this.$refs.generalSteps.filter(vars);
+          }
+        });
+        this.sort();
       });
-      this.sort();
     },
     addPre() {
       let jsr223PreProcessor = createComponent("JSR223PreProcessor");