diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
index 1d1798ec5a..6b15f37c90 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -1,22 +1,21 @@
 <template>
   <el-card class="api-component">
-    <fieldset :disabled="data.disabled" class="ms-fieldset">
 
-      <div class="header" @click="active(data)">
+    <div class="header" @click="active(data)">
 
-        <slot name="beforeHeaderLeft">
-          <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
-            <div class="el-step__icon-inner">{{data.index}}</div>
-          </div>
-          <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
-        </slot>
+      <slot name="beforeHeaderLeft">
+        <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
+          <div class="el-step__icon-inner">{{data.index}}</div>
+        </div>
+        <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
+      </slot>
 
-        <span @click.stop>
+      <span @click.stop>
         <slot name="headerLeft">
           <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
              @click="active(data)" v-if="data.type!='scenario'"/>
           <el-input :draggable="draggable" v-if="isShowInput && isShowNameInput" size="small" v-model="data.name" class="name-input"
-                    @blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
+                    @blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit" :disabled="data.disabled"/>
           <span v-else>
             {{data.name}}
             <i class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester v-if="data.referenced!='REF' && !data.disabled"/>
@@ -25,29 +24,30 @@
         <slot name="behindHeaderLeft"></slot>
       </span>
 
-        <div class="header-right" @click.stop>
-          <slot name="message"></slot>
-          <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top">
-            <el-switch v-model="data.enable" class="enable-switch"/>
-          </el-tooltip>
-          <slot name="button"></slot>
-          <el-tooltip content="Copy" placement="top">
-            <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow"/>
-          </el-tooltip>
-          <el-tooltip :content="$t('commons.remove')" placement="top">
-            <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove"/>
-          </el-tooltip>
-        </div>
+      <div class="header-right" @click.stop>
+        <slot name="message"></slot>
+        <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top">
+          <el-switch v-model="data.enable" class="enable-switch"/>
+        </el-tooltip>
+        <slot name="button"></slot>
+        <el-tooltip content="Copy" placement="top">
+          <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow"/>
+        </el-tooltip>
+        <el-tooltip :content="$t('commons.remove')" placement="top">
+          <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove"/>
+        </el-tooltip>
       </div>
-      <div class="header">
+    </div>
+    <div class="header">
+      <fieldset :disabled="data.disabled" class="ms-fieldset">
         <el-collapse-transition>
           <div v-if="data.active && showCollapse" :draggable="draggable">
             <el-divider></el-divider>
             <slot></slot>
           </div>
         </el-collapse-transition>
-      </div>
-    </fieldset>
+      </fieldset>
+    </div>
 
   </el-card>
 </template>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
index a0d7bf3649..d2e1515ec7 100644
--- a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@@ -1,14 +1,22 @@
 <template>
   <el-dialog :title="$t('api_test.scenario.variables')" :close-on-click-modal="false"
-             :visible.sync="visible" class="environment-dialog" width="60%"
-             @close="close">
+             :visible.sync="visible" class="environment-dialog" width="850px"
+             @close="close" v-loading="loading">
     <div>
+      <el-input placeholder="变量名称搜索" style="width: 50%;margin: 0px 0px 20px" v-model="selectVariable" size="small" @change="filter" @keyup.enter="filter">
+        <el-select v-model="searchType" slot="prepend" placeholder="类型" style="width: 90px" @change="filter">
+          <el-option value="CONSTANT" label="常量"></el-option>
+          <el-option value="LIST" label="列表"></el-option>
+          <el-option value="CSV" label="CSV"></el-option>
+          <el-option value="COUNTER" label="计数器"></el-option>
+          <el-option value="RANDOM" label="随机数"></el-option>
+        </el-select>
+      </el-input>
       <el-row>
         <el-col :span="12">
           <div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
-
             <el-table ref="table" border :data="variables" class="adjust-table" @select-all="select" @select="select"
-                      v-loading="loading" @row-click="edit">
+                      v-loading="loading" @row-click="edit" height="400px" :row-class-name="tableRowClassName">
               <el-table-column type="selection" width="38"/>
               <el-table-column prop="num" label="ID" sortable/>
               <el-table-column prop="name" :label="$t('api_test.variable_name')" sortable show-overflow-tooltip/>
@@ -49,8 +57,6 @@
         </el-dropdown>
       </div>
     </template>
-
-
   </el-dialog>
 </template>
 
@@ -63,7 +69,7 @@
   import MsEditRandom from "./EditRandom";
   import MsEditListValue from "./EditListValue";
   import MsEditCsv from "./EditCsv";
-  import {getUUID} from "@/common/js/utils";
+  import {_filter, getUUID} from "@/common/js/utils";
 
   export default {
     name: "MsVariableList",
@@ -80,6 +86,9 @@
     data() {
       return {
         variables: [],
+        searchType: "",
+        selectVariable: "",
+        condition: {},
         types: new Map([
           ['CONSTANT', '常量'],
           ['LIST', '列表'],
@@ -105,6 +114,12 @@
       edit(row) {
         this.editData = row;
       },
+      tableRowClassName(row) {
+        if (row.row.hidden) {
+          return 'ms-variable-hidden-row';
+        }
+        return '';
+      },
       addParameters(v) {
         v.id = getUUID();
         if (v.type === 'CSV') {
@@ -133,10 +148,13 @@
         this.visible = false;
         let saveVariables = [];
         this.variables.forEach(item => {
+          item.hidden = undefined;
           if (item.name && item.name != "") {
             saveVariables.push(item);
           }
         })
+        this.selectVariable = "";
+        this.searchType = "";
         this.$emit('setVariables', saveVariables);
       },
       deleteVariable() {
@@ -149,11 +167,46 @@
           const index = this.variables.findIndex(d => d.id === row);
           this.variables.splice(index, 1);
         })
-      }
+      },
+      filter() {
+        let datas = [];
+        this.variables.forEach(item => {
+          if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
+            if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) || (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          }
+          else if (this.selectVariable && this.selectVariable != "") {
+            if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          }
+          else if (this.searchType && this.searchType != "") {
+            if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) {
+              item.hidden = true;
+            } else {
+              item.hidden = undefined;
+            }
+          }
+          datas.push(item);
+        })
+        this.variables = datas;
+      },
+      createFilter(queryString) {
+        return item => {
+          return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
+        };
+      },
     }
   }
 </script>
 
-<style scoped>
-
+<style>
+  .ms-variable-hidden-row {
+    display: none;
+  }
 </style>