diff --git a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
index aecd0f2b80..a63b08be3a 100644
--- a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
@@ -7,8 +7,7 @@
           size="mini"
           v-model="selectVariable"
           @change="filter"
-          @keyup.enter="filter"
-        >
+          @keyup.enter="filter">
         </el-input>
       </div>
       <div style="padding-bottom: 10px; float: right">
@@ -16,27 +15,20 @@
           v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']"
           icon="el-icon-box"
           :content="$t('commons.import')"
-          @click="importJSON"
-        />
-        <el-dropdown @command="handleExportCommand" class="scenario-ext-btn" trigger="hover"
-                     v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
-          <ms-table-button
-            style="margin-left: 10px"
-            icon="el-icon-box"
-            :content="$t('commons.export')"
-          />
+          @click="importJSON" />
+        <el-dropdown
+          @command="handleExportCommand"
+          class="scenario-ext-btn"
+          trigger="hover"
+          v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
+          <ms-table-button style="margin-left: 10px" icon="el-icon-box" :content="$t('commons.export')" />
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="exportApi">{{ $t('envrionment.export_variable_tip') }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 
-        <el-link
-          style="margin-left: 10px"
-          @click="batchAdd"
-          type="primary"
-          :disabled="isReadOnly"
-        >
-          {{ $t("commons.batch_add") }}
+        <el-link style="margin-left: 10px" @click="batchAdd" type="primary" :disabled="isReadOnly">
+          {{ $t('commons.batch_add') }}
         </el-link>
       </div>
     </div>
@@ -48,23 +40,20 @@
         width: 99%;
         margin-top: 10px;
         clear: both;
-      "
-    >
+      ">
       <ms-table
         v-loading="loading"
         row-key="id"
         :data="variables"
-        :total="items.length"
         :screen-height="screenHeight"
         :batch-operators="batchButtons"
         :remember-order="true"
         :highlightCurrentRow="true"
+        :page-size="pageSize"
+        :total="total"
         @refresh="onChange"
-        ref="variableTable"
-      >
-        <ms-table-column prop="num" sortable label="ID" min-width="60">
-        </ms-table-column>
-
+        ref="variableTable">
+        <ms-table-column prop="num" sortable label="ID" min-width="60" />
         <ms-table-column
           prop="scope"
           sortable
@@ -77,24 +66,13 @@
               v-model="scope.row.scope"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType(scope.row)"
-            >
-              <el-option
-                v-for="item in scopeTypeFilters"
-                :key="item.value"
-                :label="item.text"
-                :value="item.value"
-              />
+              @change="changeType(scope.row)">
+              <el-option v-for="item in scopeTypeFilters" :key="item.value" :label="item.text" :value="item.value" />
             </el-select>
           </template>
         </ms-table-column>
 
-        <ms-table-column
-          prop="name"
-          :label="$t('api_test.variable_name')"
-          min-width="200"
-          sortable
-        >
+        <ms-table-column prop="name" :label="$t('api_test.variable_name')" min-width="200" sortable>
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.name"
@@ -102,145 +80,98 @@
               maxlength="200"
               :placeholder="$t('api_test.variable_name')"
               show-word-limit
-              @change="change"
-            />
+              @change="change" />
           </template>
         </ms-table-column>
-        <ms-table-column
-          prop="type"
-          :label="$t('test_track.case.type')"
-          min-width="140"
-          sortable
-        >
+        <ms-table-column prop="type" :label="$t('test_track.case.type')" min-width="140" sortable>
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.type"
               v-if="!scope.row.scope || scope.row.scope == 'api'"
               :placeholder="$t('commons.please_select')"
-              size="mini"
-            >
-              <el-option
-                v-for="item in typeSelectOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+              size="mini">
+              <el-option v-for="item in typeSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
 
-            <el-select
-              v-else
-              v-model="scope.row.type"
-              :placeholder="$t('commons.please_select')"
-              size="mini"
-            >
+            <el-select v-else v-model="scope.row.type" :placeholder="$t('commons.please_select')" size="mini">
               <el-option
                 v-for="item in uiTypeSelectOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
-              />
+                :value="item.value" />
             </el-select>
           </template>
         </ms-table-column>
 
-        <el-table-column
-          prop="value"
-          :label="$t('api_test.value')"
-          min-width="200px"
-          sortable
-          show-overflow-tooltip
-        >
+        <el-table-column prop="value" :label="$t('api_test.value')" min-width="200px" sortable show-overflow-tooltip>
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.value"
               size="mini"
               v-if="scope.row.type !== 'CSV'"
               :placeholder="valueText(scope.row)"
-              :disabled="
-                scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
-              "
-            />
-            <csv-file-upload
-              :parameter="scope.row"
-              v-if="scope.row.type === 'CSV'"
-            />
+              :disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'" />
+            <csv-file-upload :parameter="scope.row" v-if="scope.row.type === 'CSV'" />
           </template>
         </el-table-column>
-        <ms-table-column
-          prop="description"
-          :label="$t('commons.remark')"
-          min-width="160"
-          sortable
-        >
+        <ms-table-column prop="description" :label="$t('commons.remark')" min-width="160" sortable>
           <template slot-scope="scope">
-            <el-input v-model="scope.row.description" size="mini"/>
+            <el-input v-model="scope.row.description" size="mini" />
           </template>
         </ms-table-column>
 
         <ms-table-column :label="$t('commons.operating')" width="150">
           <template v-slot:default="scope">
             <span>
-              <el-switch v-model="scope.row.enable" size="mini"/>
-              <el-tooltip
-                effect="dark"
-                :content="$t('commons.remove')"
-                placement="top-start"
-              >
-                <el-button
-                  icon="el-icon-delete"
-                  type="danger"
-                  circle
-                  size="mini"
-                  style="margin-left: 10px"
-                  @click="remove(scope.row)"
-                  v-if="isDisable(scope.row)"
-                />
-              </el-tooltip>
-              <el-tooltip
-                v-if="!scope.row.scope || scope.row.scope == 'api'"
-                effect="dark"
-                :content="$t('schema.adv_setting')"
-                placement="top-start"
-              >
-                <el-button
-                  icon="el-icon-setting"
-                  circle
-                  size="mini"
-                  style="margin-left: 10px"
-                  @click="openSetting(scope.row)"
-                  v-if="scope.row.type !== 'LIST'"
-                  @change="change"
-                />
-              </el-tooltip>
+              <el-switch v-model="scope.row.enable" size="mini" />
+              <el-button
+                icon="el-icon-delete"
+                type="danger"
+                circle
+                size="mini"
+                style="margin-left: 10px"
+                @click="remove(scope.row)"
+                v-if="isDisable(scope.row)" />
+              <el-button
+                v-if="(!scope.row.scope || scope.row.scope == 'api') && scope.row.type !== 'LIST'"
+                icon="el-icon-setting"
+                circle
+                size="mini"
+                style="margin-left: 10px"
+                @click="openSetting(scope.row)"
+                @change="change" />
             </span>
           </template>
         </ms-table-column>
       </ms-table>
+      <ms-table-pagination
+        :change="nextPage"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :total="total" />
     </div>
-    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
     <api-variable-setting ref="apiVariableSetting"></api-variable-setting>
-    <variable-import
-      ref="variableImport"
-      @mergeData="mergeData"
-    ></variable-import>
+    <variable-import ref="variableImport" @mergeData="mergeData"></variable-import>
   </div>
 </template>
 
 <script>
-import {KeyValue} from "../../../model/EnvTestModel";
-import MsApiVariableInput from "./ApiVariableInput";
-import BatchAddParameter from "./BatchAddParameter";
-import MsTableButton from "../../MsTableButton";
-import MsTable from "../../table/MsTable";
-import MsTableColumn from "../../table/MsTableColumn";
-import ApiVariableSetting from "./ApiVariableSetting";
-import CsvFileUpload from "./variable/CsvFileUpload";
-import {downloadFile, getUUID, operationConfirm} from "../../../utils";
-import VariableImport from "./variable/VariableImport";
-import _ from "lodash";
+import { KeyValue } from '../../../model/EnvTestModel';
+import MsApiVariableInput from './ApiVariableInput';
+import BatchAddParameter from './BatchAddParameter';
+import MsTableButton from '../../MsTableButton';
+import MsTable from '../../table/MsTable';
+import MsTableColumn from '../../table/MsTableColumn';
+import ApiVariableSetting from './ApiVariableSetting';
+import CsvFileUpload from './variable/CsvFileUpload';
+import { downloadFile, getUUID, operationConfirm } from '../../../utils';
+import VariableImport from './variable/VariableImport';
+import _ from 'lodash';
+import MsTablePagination from '../../pagination/TablePagination';
 
 export default {
-  name: "MsApiScenarioVariables",
+  name: 'MsApiScenarioVariables',
   components: {
     BatchAddParameter,
     MsApiVariableInput,
@@ -250,6 +181,7 @@ export default {
     ApiVariableSetting,
     CsvFileUpload,
     VariableImport,
+    MsTablePagination,
   },
   props: {
     items: Array,
@@ -268,41 +200,49 @@ export default {
   },
   data() {
     return {
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
       loading: false,
-      screenHeight: "400px",
+      screenHeight: '400px',
       batchButtons: [
         {
-          name: this.$t("api_test.definition.request.batch_delete"),
+          name: this.$t('api_test.definition.request.batch_delete'),
           handleClick: this.handleDeleteBatch,
         },
       ],
       typeSelectOptions: [
-        {value: "CONSTANT", label: this.$t("api_test.automation.constant")},
-        {value: "LIST", label: this.$t("test_track.case.list")},
-        {value: "CSV", label: "CSV"},
-        {value: "COUNTER", label: this.$t("api_test.automation.counter")},
-        {value: "RANDOM", label: this.$t("api_test.automation.random")},
+        { value: 'CONSTANT', label: this.$t('api_test.automation.constant') },
+        { value: 'LIST', label: this.$t('test_track.case.list') },
+        { value: 'CSV', label: 'CSV' },
+        { value: 'COUNTER', label: this.$t('api_test.automation.counter') },
+        { value: 'RANDOM', label: this.$t('api_test.automation.random') },
       ],
       uiTypeSelectOptions: [
-        {value: "STRING", label: this.$t("api_test.automation.string")},
-        {value: "ARRAY", label: this.$t("api_test.automation.array")},
-        {value: "JSON", label: this.$t("api_test.automation.json")},
-        {value: "NUMBER", label: this.$t("api_test.automation.number")},
+        { value: 'STRING', label: this.$t('api_test.automation.string') },
+        { value: 'ARRAY', label: this.$t('api_test.automation.array') },
+        { value: 'JSON', label: this.$t('api_test.automation.json') },
+        { value: 'NUMBER', label: this.$t('api_test.automation.number') },
       ],
       variables: {},
-      selectVariable: "",
+      selectVariable: '',
       editData: {},
+      allData: [],
+      lastPage: 1,
       scopeTypeFilters: [
-        {text: this.$t("commons.api"), value: "api"},
-        {text: this.$t("commons.ui_test"), value: "ui"},
-      ]
+        { text: this.$t('commons.api'), value: 'api' },
+        { text: this.$t('commons.ui_test'), value: 'ui' },
+      ],
     };
   },
   watch: {
     items: {
       handler(v) {
-        this.variables = v;
+        this.allData = v;
+        this.pageSize = 10;
+        this.total = this.allData.length;
         this.sortParameters();
+        this.nextPage();
       },
       immediate: true,
       deep: true,
@@ -312,14 +252,35 @@ export default {
     remove: function (index) {
       const dataIndex = this.variables.findIndex((d) => d.name === index.name);
       this.variables.splice(dataIndex, 1);
-      this.$emit("change", this.variables);
+
+      const allDataIndex = this.allData.findIndex((d) => d.name === index.name);
+      this.allData.splice(allDataIndex, 1);
+      this.nextPage();
+    },
+    nextPage() {
+      if (
+        this.$refs.variableTable &&
+        this.$refs.variableTable.selectRows &&
+        this.$refs.variableTable.selectRows.size > 0
+      ) {
+        return;
+      }
+      // 如果是第一页，则截取0到pageSize（每页显示多少条数据）即可
+      if (this.currentPage == 1) {
+        this.variables = this.allData.slice(0, this.pageSize);
+        return;
+      }
+      let start = (this.currentPage - 1) * this.pageSize;
+      let end = this.currentPage * this.pageSize;
+      this.variables = this.allData.slice(start, end);
+      this.total = this.allData.length;
     },
     change: function () {
       let isNeedCreate = true;
       let removeIndex = -1;
-      let repeatKey = "";
-      this.variables.forEach((item, index) => {
-        this.variables.forEach((row, rowIndex) => {
+      let repeatKey = '';
+      this.items.forEach((item, index) => {
+        this.items.forEach((row, rowIndex) => {
           if (item.name === row.name && index !== rowIndex) {
             repeatKey = item.name;
           }
@@ -333,118 +294,106 @@ export default {
           isNeedCreate = false;
         }
       });
-      if (repeatKey !== "") {
+      if (repeatKey !== '') {
         this.$warning(
-          this.$t("api_test.environment.common_config") +
-          "【" +
+          this.$t('api_test.environment.common_config') +
+          '【' +
           repeatKey +
-          "】" +
-          this.$t("load_test.param_is_duplicate")
+          '】' +
+          this.$t('load_test.param_is_duplicate')
         );
       }
       if (isNeedCreate) {
-        this.variables.push(
-          new KeyValue({enable: true, id: getUUID(), type: "CONSTANT", scope: "api"})
-        );
+        this.items.push(new KeyValue({ enable: true, id: getUUID(), type: 'CONSTANT', scope: 'api' }));
       }
-      this.$emit("change", this.variables);
+      this.$emit('change', this.items);
       // TODO 检查key重复
     },
     changeType(data) {
-      data.value = "";
-      if (
-        !data.delimiter ||
-        (!data.files && data.files.length === 0) ||
-        !data.quotedData
-      ) {
-        data.delimiter = ",";
+      data.value = '';
+      if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
+        data.delimiter = ',';
         data.files = [];
-        data.quotedData = "false";
+        data.quotedData = 'false';
       }
 
-      if (!data.scope || data.scope == "ui") {
+      if (!data.scope || data.scope == 'ui') {
         data.type = 'STRING';
       }
     },
     valueText(data) {
       switch (data.type) {
-        case "LIST":
-          return this.$t("api_test.environment.list_info");
-        case "CONSTANT":
-          return this.$t("api_test.value");
-        case "COUNTER":
-        case "RANDOM":
-          return this.$t("api_test.environment.advanced_setting");
+        case 'LIST':
+          return this.$t('api_test.environment.list_info');
+        case 'CONSTANT':
+          return this.$t('api_test.value');
+        case 'COUNTER':
+        case 'RANDOM':
+          return this.$t('api_test.environment.advanced_setting');
         default:
-          return this.$t("api_test.value");
+          return this.$t('api_test.value');
       }
     },
     querySearch(queryString, cb) {
       let restaurants = [
-        {value: "UTF-8"},
-        {value: "UTF-16"},
-        {value: "GB2312"},
-        {value: "ISO-8859-15"},
-        {value: "US-ASCll"},
+        { value: 'UTF-8' },
+        { value: 'UTF-16' },
+        { value: 'GB2312' },
+        { value: 'ISO-8859-15' },
+        { value: 'US-ASCll' },
       ];
-      let results = queryString
-        ? restaurants.filter(this.createFilter(queryString))
-        : restaurants;
+      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
       // 调用 callback 返回建议列表的数据
       cb(results);
     },
     sortParameters() {
       let index = 1;
-      this.variables.forEach((item) => {
+      this.allData.forEach((item) => {
         item.num = index;
-        if (!item.type || item.type === "text") {
-          item.type = "CONSTANT";
+        if (!item.type || item.type === 'text') {
+          item.type = 'CONSTANT';
         }
         if (!item.id) {
           item.id = getUUID();
         }
         if (item.remark) {
-          this.$set(item, "description", item.remark);
+          this.$set(item, 'description', item.remark);
           item.remark = undefined;
         }
         if (!item.scope) {
-          this.$set(item, "scope", "api");
+          this.$set(item, 'scope', 'api');
         }
         index++;
       });
     },
     handleDeleteBatch() {
-      operationConfirm(
-        this,
-        this.$t("api_test.environment.variables_delete_info") + " ？",
-        () => {
-          let ids = this.$refs.variableTable.selectRows;
-          ids.forEach((row) => {
-            if (row.id) {
-              const index = this.variables.findIndex((d) => d.id === row.id);
-              if (index !== this.variables.length - 1) {
-                this.variables.splice(index, 1);
-              }
+      operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + ' ？', () => {
+        let ids = this.$refs.variableTable.selectRows;
+        ids.forEach((row) => {
+          if (row.id) {
+            const index = this.variables.findIndex((d) => d.id === row.id);
+            const allIndex = this.allData.findIndex((d) => d.id === row.id);
+            if (index !== this.variables.length - 1) {
+              this.variables.splice(index, 1);
             }
-          });
-          this.sortParameters();
-          this.$refs.variableTable.cancelCurrentRow();
-          this.$refs.variableTable.clear();
-          this.variables.forEach((item) => {
-            item.showMore = false;
-          });
-        }
-      );
+            if (allIndex !== this.allData.length - 1) {
+              this.allData.splice(allIndex, 1);
+            }
+          }
+        });
+        this.sortParameters();
+        this.$refs.variableTable.cancelCurrentRow();
+        this.$refs.variableTable.clear();
+        this.variables.forEach((item) => {
+          item.showMore = false;
+        });
+      });
     },
     filter(scope) {
       let datas = [];
       this.variables.forEach((item) => {
-        if (this.selectVariable && this.selectVariable != "" && item.name) {
-          if (
-            item.name
-              .toLowerCase()
-              .indexOf(this.selectVariable.toLowerCase()) == -1
-          ) {
+        if (this.selectVariable && this.selectVariable != '' && item.name) {
+          if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
             item.hidden = true;
           } else {
             item.hidden = undefined;
@@ -457,20 +406,20 @@ export default {
       this.variables = datas;
     },
     filterScope(value, row) {
-      if (value == "ui") {
-        return row.scope == "ui";
+      if (value == 'ui') {
+        return row.scope == 'ui';
       }
-      return !row.scope || row.scope == "api";
+      return !row.scope || row.scope == 'api';
     },
     openSetting(data) {
       this.$refs.apiVariableSetting.open(data);
     },
     isDisable: function (row) {
-      const index = this.variables.findIndex((d) => d.name === row.name);
-      return this.variables.length - 1 !== index;
+      const index = this.items.findIndex((d) => d.name === row.name);
+      return this.items.length - 1 !== index;
     },
     _handleBatchVars(data) {
-      let params = data.split("\n");
+      let params = data.split('\n');
       let keyValues = [];
       params.forEach((item) => {
         if (item) {
@@ -479,10 +428,11 @@ export default {
           let required = false;
           keyValues.push(
             new KeyValue({
+              scope: 'api',
               name: line[0],
               required: required,
               value: values,
-              type: "CONSTANT",
+              type: 'CONSTANT',
               valid: false,
               file: false,
               encode: true,
@@ -502,14 +452,14 @@ export default {
         let keyValues = this._handleBatchVars(data);
         keyValues.forEach((keyValue) => {
           let isAdd = true;
-          this.variables.forEach((item) => {
+          this.items.forEach((item) => {
             if (item.name === keyValue.name) {
               item.value = keyValue.value;
               isAdd = false;
             }
           });
           if (isAdd) {
-            this.variables.splice(
+            this.items.splice(
               this.variables.indexOf((i) => !i.name),
               0,
               keyValue
@@ -524,34 +474,31 @@ export default {
     exportJSON() {
       let apiVariable = [];
       this.$refs.variableTable.selectRows.forEach((r) => {
-        if (!r.scope || r.scope != "ui") {
+        if (!r.scope || r.scope != 'ui') {
           apiVariable.push(r);
         }
       });
 
       if (apiVariable.length < 1) {
-        this.$warning(this.$t("api_test.environment.select_api_variable"));
+        this.$warning(this.$t('api_test.environment.select_api_variable'));
         return;
       }
       let variablesJson = [];
-      let messages = "";
+      let messages = '';
       let rows = this.$refs.variableTable.selectRows;
       rows.forEach((row) => {
-        if (row.type === "CSV") {
-          messages = this.$t("variables.csv_download");
+        if (row.type === 'CSV') {
+          messages = this.$t('variables.csv_download');
         }
-        if (row.name && (!row.scope || row.scope == "api")) {
+        if (row.name && (!row.scope || row.scope == 'api')) {
           variablesJson.push(row);
         }
       });
-      if (messages !== "") {
+      if (messages !== '') {
         this.$warning(messages);
         return;
       }
-      downloadFile(
-        "MS_" + variablesJson.length + "_Environments_variables.json",
-        JSON.stringify(variablesJson)
-      );
+      downloadFile('MS_' + variablesJson.length + '_Environments_variables.json', JSON.stringify(variablesJson));
     },
     importJSON() {
       this.$refs.variableImport.open();
@@ -561,11 +508,9 @@ export default {
         importData.id = getUUID();
         importData.enable = true;
         importData.showMore = false;
-        let sameNameIndex = this.variables.findIndex(
-          (d) => d.name === importData.name
-        );
+        let sameNameIndex = this.variables.findIndex((d) => d.name === importData.name);
         if (sameNameIndex !== -1) {
-          if (modeId === "fullCoverage") {
+          if (modeId === 'fullCoverage') {
             this.variables.splice(sameNameIndex, 1, importData);
           }
         } else {
@@ -573,22 +518,24 @@ export default {
         }
       });
     },
-    handleExportCommand(command){
+    handleExportCommand(command) {
       this.exportJSON();
-    }
+    },
   },
   created() {
     if (this.items.length === 0) {
-      this.items.push(new KeyValue({enable: true, scope: "api"}));
+      this.items.push(new KeyValue({ enable: true, scope: 'api' }));
     } else {
       //历史数据默认是 api 应用场景
-      _.forEach(this.items, item => {
+      _.forEach(this.items, (item) => {
         if (!item.scope) {
-          this.$set(item, "scope", "api");
+          this.$set(item, 'scope', 'api');
         }
-      })
-      this.variables = this.items;
+      });
+      this.allData = this.items;
+      this.nextPage();
     }
+    this.total = this.allData.length;
   },
 };
 </script>