From 249d9fcefe910b10710a6dae29076bfe9a7e1c3d Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 2 Jun 2021 12:02:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E5=A4=B4=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BF=9D=E5=AD=98=E5=88=97=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/service/ApiAutomationService.java     |  14 +-
 .../api/automation/ApiAutomation.vue          |   4 +-
 .../automation/scenario/ApiScenarioList.vue   | 449 ++++++++----------
 .../scenario/api/RelevanceApiList.vue         | 194 +++-----
 .../api/definition/ApiDefinition.vue          |   7 -
 .../components/list/ApiCaseSimpleList.vue     | 148 +++---
 .../definition/components/list/ApiList.vue    | 262 +++++-----
 .../components/table/Ms-table-column.vue      |  13 +-
 .../components/table/MsCustomTableHeader.vue  | 102 ++++
 .../common/components/table/MsTable.vue       |  66 ++-
 .../table/MsTableHeaderSelectPopover.vue      |   4 +-
 .../components/common/model/JsonData.js       |  25 -
 .../workspace/template/CustomFieldList.vue    |  40 +-
 .../workspace/template/IssuesTemplateList.vue |   1 +
 .../template/TestCaseTemplateList.vue         |   1 +
 frontend/src/common/css/main.css              |   2 +-
 .../src/common/js/default-table-header.js     |  56 +++
 frontend/src/common/js/tableUtils.js          |  72 +++
 18 files changed, 782 insertions(+), 678 deletions(-)
 create mode 100644 frontend/src/business/components/common/components/table/MsCustomTableHeader.vue

diff --git a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
index 747552b019..df3ac9ba69 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
@@ -527,7 +527,9 @@ public class ApiAutomationService {
         objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
         JSONObject element = JSON.parseObject(definition);
         try {
-            return objectMapper.readValue(element.getString("hashTree"), new TypeReference<LinkedList<MsTestElement>>() {});
+            if (element != null) {
+                return objectMapper.readValue(element.getString("hashTree"), new TypeReference<LinkedList<MsTestElement>>() {});
+            }
         } catch (JsonProcessingException e) {
             LogUtil.error(e.getMessage(), e);
         }
@@ -1703,10 +1705,12 @@ public class ApiAutomationService {
                 ApiScenarioWithBLOBs scenario = apiScenarioMapper.selectByPrimaryKey(id);
                 String definition = scenario.getScenarioDefinition();
                 JSONObject object = JSON.parseObject(definition);
-                object.put("environmentMap", newEnvMap);
-                String newDefinition = JSON.toJSONString(object);
-                scenario.setScenarioDefinition(newDefinition);
-                apiScenarioMapper.updateByPrimaryKeySelective(scenario);
+                if (object != null) {
+                    object.put("environmentMap", newEnvMap);
+                    String newDefinition = JSON.toJSONString(object);
+                    scenario.setScenarioDefinition(newDefinition);
+                    apiScenarioMapper.updateByPrimaryKeySelective(scenario);
+                }
             }
         });
     }
diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index 6b3097575c..40941ffba6 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -174,11 +174,11 @@ export default {
             let data = response.data;
             if (data != null) {
               //如果树未加载
-              if (JSON.stringify(this.moduleOptions) === '{}') {
+              if (this.moduleOptions && JSON.stringify(this.moduleOptions) === '{}') {
                 this.$refs.nodeTree.list();
               }
               let row = data.listObject[0];
-              if (row.tags.length > 0) {
+              if (row.tags && row.tags.length > 0) {
                 row.tags = JSON.parse(row.tags);
               }
 
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index 7d35baa0c2..ab318fd359 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -4,116 +4,130 @@
       <ms-table-header :condition.sync="condition" @search="selectByParam" title=""
                        :show-create="false" :tip="$t('commons.search_by_id_name_tag')"/>
 
-      <el-table ref="scenarioTable" border :data="tableData" class="adjust-table ms-select-all-fixed"
-                @sort-change="sort"
-                @filter-change="filter"
-                @select-all="handleSelectAll"
-                @select="handleSelect"
-                @header-dragend="headerDragend"
-                :height="screenHeight">
+      <ms-table
+        :data="tableData"
+        :height="screenHeight"
+        :condition="condition"
+        :page-size="pageSize"
+        :operators="operators"
+        :batch-operators="buttons"
+        :total="total"
+        :fields.sync="fields"
+        field-key="API_SCENARIO"
+        operator-width="200"
+        @refresh="search(projectId)"
+        ref="scenarioTable">
 
-        <el-table-column type="selection" width="50"/>
+        <span v-for="(item) in fields" :key="item.key">
 
-        <ms-table-header-select-popover v-show="total>0"
-                                        :page-size="pageSize>total?total:pageSize"
-                                        :total="total"
-                                        :select-data-counts="selectDataCounts"
-                                        @selectPageAll="isSelectDataAll(false)"
-                                        @selectAll="isSelectDataAll(true)"/>
-
-        <el-table-column v-if="!referenced" width="30" min-width="30" :resizable="false" align="center">
-          <template v-slot:default="scope">
-            <show-more-btn :is-show="scope.row.showMore" :buttons="trashEnable ? trashButtons: buttons"
-                           :size="selectDataCounts"/>
-          </template>
-        </el-table-column>
-        <template v-for="(item, index) in tableLabel">
-          <el-table-column v-if="item.id == 'num' && !customNum" prop="num" label="ID"
-                           sortable="custom"
-                           min-width="120px"
-                           show-overflow-tooltip :key="index">
+          <ms-table-column v-if="item.id == 'num' && !customNum"
+                           prop="num"
+                           label="ID"
+                           sortable
+                           :fields-width="fieldsWidth"
+                           min-width="120px">
             <template slot-scope="scope">
               <!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>-->
               <el-tooltip content="编辑">
                 <a style="cursor:pointer" @click="edit(scope.row)"> {{ scope.row.num }} </a>
               </el-tooltip>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'num' && customNum" prop="customNum" label="ID"
-                           sortable="custom"
-                           min-width="120px"
-                           show-overflow-tooltip :key="index">
+          </ms-table-column>
+
+          <ms-table-column
+            v-if="item.id == 'num' && customNum" prop="customNum"
+            label="ID"
+            sortable
+            :fields-width="fieldsWidth"
+            min-width="120px">
             <template slot-scope="scope">
               <!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.customNum }} </span>-->
               <el-tooltip content="编辑">
                 <a style="cursor:pointer" @click="edit(scope.row)"> {{ scope.row.customNum }} </a>
               </el-tooltip>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'name'" prop="name"
-                           sortable="custom"
+          </ms-table-column >
+
+          <ms-table-column prop="name"
+                           sortable
+                           :field="item"
+                           :fields-width="fieldsWidth"
                            :label="$t('api_test.automation.scenario_name')"
-                           show-overflow-tooltip
-                           min-width="150px"
-                           :key="index"
-          />
-          <el-table-column v-if="item.id == 'level'" prop="level"
-                           sortable="custom"
-                           column-key="level"
-                           :filters="LEVEL_FILTERS"
-                           min-width="130px"
-                           :label="$t('api_test.automation.case_level')"
-                           show-overflow-tooltip :key="index">
+                           min-width="150px"/>
+
+          <ms-table-column
+            prop="level"
+            sortable
+            :field="item"
+            :fields-width="fieldsWidth"
+            :filters="LEVEL_FILTERS"
+            min-width="130px"
+            :label="$t('api_test.automation.case_level')">
             <template v-slot:default="scope">
               <priority-table-item :value="scope.row.level"/>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'status'" prop="status" :label="$t('test_track.plan.plan_status')"
-                           sortable="custom"
-                           column-key="status"
+          </ms-table-column>
+
+          <ms-table-column prop="status"
+                           :label="$t('test_track.plan.plan_status')"
+                           sortable
+                           :field="item"
+                           :fields-width="fieldsWidth"
                            :filters="STATUS_FILTERS"
-                           show-overflow-tooltip min-width="120px" :key="index">
+                           min-width="120px">
             <template v-slot:default="scope">
               <plan-status-table-item :value="scope.row.status"/>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'tags'" prop="tags" min-width="120px"
-                           :label="$t('api_test.automation.tag')" :key="index">
+          </ms-table-column>
+
+          <ms-table-column prop="tags"
+                           :field="item"
+                           :fields-width="fieldsWidth"
+                           min-width="120px"
+                           :label="$t('api_test.automation.tag')">
             <template v-slot:default="scope">
               <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
                       :content="itemName" :show-tooltip="true"
                       tooltip style="margin-left: 0px; margin-right: 2px"/>
+              <span/>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'principal'" prop="principal" min-width="120px"
-                           :label="$t('api_test.definition.api_principal')"
-                           :filters="userFilters"
-                           column-key="principal"
-                           sortable="custom"
-                           show-overflow-tooltip
-                           :key="index"/>
-          <el-table-column v-if="item.id == 'userId'" prop="userId" min-width="120px"
+          </ms-table-column>
+
+          <ms-table-column  prop="principal"
+                            min-width="120px"
+                            :label="$t('api_test.definition.api_principal')"
+                            :filters="userFilters"
+                            :field="item"
+                            :fields-width="fieldsWidth"
+                            sortable/>
+          <ms-table-column prop="userId" min-width="120px"
                            :label="$t('api_test.automation.creator')"
                            :filters="userFilters"
-                           column-key="userId"
-                           sortable="custom"
-                           show-overflow-tooltip
-                           :key="index"/>
-          <el-table-column v-if="item.id == 'updateTime'" prop="updateTime"
-                           :label="$t('api_test.automation.update_time')" sortable="custom" min-width="180px"
-                           :key="index">
+                           :field="item"
+                           :fields-width="fieldsWidth"
+                           sortable="custom"/>
+          <ms-table-column prop="updateTime"
+                           :field="item"
+                           :fields-width="fieldsWidth"
+                           :label="$t('api_test.automation.update_time')"
+                           sortable
+                           min-width="180px">
             <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'stepTotal'" prop="stepTotal" :label="$t('api_test.automation.step')"
-                           min-width="80px"
-                           show-overflow-tooltip :key="index"/>
-          <el-table-column v-if="item.id == 'lastResult'" prop="lastResult"
+          </ms-table-column >
+          <ms-table-column prop="stepTotal"
+                           :field="item"
+                           :fields-width="fieldsWidth"
+                           :label="$t('api_test.automation.step')"
+                           min-width="80px"/>
+          <ms-table-column prop="lastResult"
                            :label="$t('api_test.automation.last_result')"
                            :filters="RESULT_FILTERS"
-
-                           sortable="custom" column-key="last_result" min-width="130px" :key="index">
+                           :field="item"
+                           :fields-width="fieldsWidth"
+                           sortable
+                           min-width="130px">
             <template v-slot:default="{row}">
               <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
                 {{ $t('api_test.automation.success') }}
@@ -122,43 +136,21 @@
                 {{ $t('api_test.automation.fail') }}
               </el-link>
             </template>
-          </el-table-column>
-          <el-table-column v-if="item.id == 'passRate'" prop="passRate"
+          </ms-table-column >
+
+          <ms-table-column prop="passRate"
+                           :field="item"
+                           :fields-width="fieldsWidth"
                            :label="$t('api_test.automation.passing_rate')"
-                           min-width="120px"
-                           show-overflow-tooltip :key="index"/>
+                           min-width="120px"/>
+        </span>
+
+        <template v-slot:opt-behind="scope">
+          <ms-scenario-extend-buttons v-if="!trashEnable" style="display: contents" @openScenario="openScenario" :row="scope.row"/>
         </template>
-        <el-table-column fixed="right" :label="$t('commons.operating')" width="190px" v-if="!referenced && !isReadOnly">
-          <template slot="header">
-            <header-label-operate @exec="customHeader"/>
-          </template>
-          <template v-slot:default="{row}">
-            <div v-if="trashEnable">
-              <ms-table-operator-button :tip="$t('commons.reduction')" icon="el-icon-refresh-left"
-                                        @exec="reductionApi(row)"/>
-              <ms-table-operator-button :tip="$t('api_test.automation.remove')" icon="el-icon-delete"
-                                        @exec="remove(row)" type="danger"/>
-            </div>
-            <div v-else>
-              <ms-table-operator-button :tip="$t('api_test.automation.edit')" icon="el-icon-edit" @exec="edit(row)"
-                                        v-permission="['PROJECT_API_SCENARIO:READ+EDIT']"/>
-              <ms-table-operator-button class="run-button"
-                                        :tip="$t('api_test.automation.execute')"
-                                        icon="el-icon-video-play"
-                                        v-permission="['PROJECT_API_SCENARIO:READ+RUN']"
-                                        @exec="execute(row)"/>
-              <ms-table-operator-button :tip="$t('api_test.automation.copy')" icon="el-icon-document-copy" type=""
-                                        v-permission="['PROJECT_API_SCENARIO:READ+COPY']"
-                                        @exec="copy(row)"/>
-              <ms-table-operator-button :tip="$t('api_test.automation.remove')"
-                                        v-permission="['PROJECT_API_SCENARIO:READ+DELETE']"
-                                        icon="el-icon-delete" @exec="remove(row)" type="danger"/>
-              <ms-scenario-extend-buttons style="display: contents" @openScenario="openScenario" :row="row"/>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <header-custom ref="headerCustom" :initTableData="search" :optionalFields=headerItems :type=type></header-custom>
+
+      </ms-table>
+
       <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
       <div>
@@ -205,23 +197,19 @@ import BatchMove from "../../../track/case/components/BatchMove";
 import MsRunMode from "./common/RunMode";
 
 import {
-  _filter,
-  _handleSelect,
-  _handleSelectAll,
-  _sort, deepClone,
-  getLabel,
-  getSelectDataCounts,
-  setUnSelectIds,
-  toggleAllSelection
+  getCustomTableHeader, getCustomTableWidth,
 } from "@/common/js/tableUtils";
-import {Api_Scenario_List} from "@/business/components/common/model/JsonData";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import {API_SCENARIO_FILTERS} from "@/common/js/table-constants";
+import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
+import MsTable from "@/business/components/common/components/table/MsTable";
 
 export default {
   name: "MsApiScenarioList",
   components: {
+    MsTable,
+    MsTableColumn,
     HeaderLabelOperate,
     HeaderCustom,
     BatchMove,
@@ -282,15 +270,14 @@ export default {
     return {
       result: {},
       type: API_SCENARIO_LIST,
-      headerItems: Api_Scenario_List,
-      tableLabel: [],
+      fields: getCustomTableHeader('API_SCENARIO'),
+      fieldsWidth: getCustomTableWidth('API_SCENARIO'),
       screenHeight: 'calc(100vh - 275px)',//屏幕高度,
       condition: {
         components: API_SCENARIO_CONFIGS
       },
       currentScenario: {},
       schedule: {},
-      selection: [],
       tableData: [],
       selectDataRange: 'all',
       currentPage: 1,
@@ -307,7 +294,62 @@ export default {
       selectDataSize: 0,
       selectAll: false,
       userFilters: [],
-      buttons: [
+      operators: [],
+      selectRows: new Set(),
+      trashOperators: [
+        {
+          tip: this.$t('commons.reduction'),
+          icon: "el-icon-refresh-left",
+          exec: this.reductionApi,
+          permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
+        },
+        {
+          tip: this.$t('commons.delete'),
+          exec: this.remove,
+          icon: "el-icon-delete",
+          type: "danger",
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+      ],
+      unTrashOperators: [
+        {
+          tip: this.$t('api_test.automation.execute'),
+          icon: "el-icon-video-play",
+          exec: this.execute,
+          permissions: ['PROJECT_API_SCENARIO:READ+RUN']
+        },
+        {
+          tip: this.$t('commons.edit'),
+          icon: "el-icon-edit",
+          exec: this.edit,
+          permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
+        },
+        {
+          tip: this.$t('api_test.automation.copy'),
+          icon: "el-icon-document-copy",
+          exec: this.copy,
+          permissions: ['PROJECT_API_SCENARIO:READ+EDIT']
+        },
+        {
+          tip: this.$t('commons.delete'),
+          exec: this.remove,
+          icon: "el-icon-delete",
+          type: "danger",
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+      ],
+      buttons: [],
+      trashButtons: [
+        {
+          name: this.$t('api_test.definition.request.batch_delete'),
+          handleClick: this.handleDeleteBatch,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+        {
+          name: "批量恢复", handleClick: this.handleBatchRestore
+        },
+      ],
+      unTrashButtons: [
         {
           name: this.$t('api_test.automation.batch_add_plan'),
           handleClick: this.handleBatchAddCase,
@@ -333,21 +375,7 @@ export default {
           handleClick: this.handleDeleteBatch,
           permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
         },
-
       ],
-      trashButtons: [
-        {
-          name: this.$t('api_test.definition.request.batch_delete'),
-          handleClick: this.handleDeleteBatch,
-          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
-        },
-        {
-          name: "批量恢复", handleClick: this.handleBatchRestore
-        },
-      ],
-      isSelectAllDate: false,
-      selectRows: new Set(),
-      selectDataCounts: 0,
       ...API_SCENARIO_FILTERS,
       typeArr: [
         {id: 'level', name: this.$t('test_track.case.priority')},
@@ -379,6 +407,8 @@ export default {
     };
   },
   created() {
+    this.operators = this.unTrashOperators;
+    this.buttons = this.unTrashButtons;
     this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
     this.search();
     this.getPrincipalOptions([]);
@@ -386,22 +416,21 @@ export default {
   watch: {
     selectNodeIds() {
       this.currentPage = 1;
-      this.condition.selectAll = false;
-      this.condition.unSelectIds = [];
-      this.selectDataCounts = 0;
+      this.$refs.scenarioTable.clear();
       this.selectProjectId ? this.search(this.selectProjectId) : this.search();
     },
     trashEnable() {
       if (this.trashEnable) {
         this.condition.filters = {status: ["Trash"]};
         this.condition.moduleIds = [];
+        this.operators = this.trashOperators;
+        this.buttons = this.trashButtons;
       } else {
         this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
+        this.operators = this.unTrashOperators;
+        this.buttons = this.unTrashButtons;
       }
-      this.condition.selectAll = false;
-      this.condition.unSelectIds = [];
-      this.selectDataCounts = 0;
-
+      this.$refs.scenarioTable.clear();
       this.search();
     },
     batchReportId() {
@@ -418,10 +447,6 @@ export default {
     },
   },
   methods: {
-    customHeader() {
-      const list = deepClone(this.tableLabel);
-      this.$refs.headerCustom.open(list);
-    },
     selectByParam() {
       this.changeSelectDataRangeAll();
       this.search();
@@ -462,18 +487,9 @@ export default {
           this.condition.executeStatus = 'executePass';
           break;
       }
-      this.selection = [];
-
-      if (!this.condition.selectAll) {
-        this.condition.selectAll = false;
-        this.condition.unSelectIds = [];
-        this.selectDataCounts = 0;
-      }
-
       let url = "/api/automation/list/" + this.currentPage + "/" + this.pageSize;
       if (this.condition.projectId) {
-        this.result.loading = true;
-        this.$post(url, this.condition, response => {
+        this.result = this.$post(url, this.condition, response => {
           let data = response.data;
           this.total = data.itemCount;
           this.tableData = data.listObject;
@@ -482,41 +498,8 @@ export default {
               item.tags = JSON.parse(item.tags);
             }
           });
-
-          if (!this.condition.selectAll) {
-            this.condition.unSelectIds = response.data.listObject.map(s => s.id);
-          }
-
-          this.$nextTick(function () {
-            if (this.$refs.scenarioTable) {
-              setTimeout(this.$refs.scenarioTable.doLayout, 200);
-            }
-            this.checkTableRowIsSelect();
-          });
-        });
-      }
-      getLabel(this, API_SCENARIO_LIST);
-
-    },
-    checkTableRowIsSelect() {
-      //如果默认全选的话，则选中应该选中的行
-      if (this.condition.selectAll) {
-        let unSelectIds = this.condition.unSelectIds;
-        this.tableData.forEach(row => {
-          if (unSelectIds.indexOf(row.id) < 0) {
-            this.$refs.scenarioTable.toggleRowSelection(row, true);
-
-            //默认全选，需要把选中对行添加到selectRows中。不然会影响到勾选函数统计
-            if (!this.selectRows.has(row)) {
-              this.$set(row, "showMore", true);
-              this.selectRows.add(row);
-            }
-          } else {
-            //不勾选的行，也要判断是否被加入了selectRow中。加入了的话就去除。
-            if (this.selectRows.has(row)) {
-              this.$set(row, "showMore", false);
-              this.selectRows.delete(row);
-            }
+          if (this.$refs.scenarioTable) {
+            this.$refs.scenarioTable.clear();
           }
         });
       }
@@ -534,10 +517,11 @@ export default {
       }
     },
     handleBatchAddCase() {
+      this.selectRows = this.$refs.scenarioTable.selectRows;
       this.planVisible = true;
     },
     handleBatchEdit() {
-      this.$refs.batchEdit.setScenarioSelectRows(this.selectRows, "scenario");
+      this.$refs.batchEdit.setScenarioSelectRows(this.$refs.scenarioTable.selectRows, "scenario");
       if (this.condition.selectAll) {
         this.condition.ids = [];
         let param = {};
@@ -546,11 +530,11 @@ export default {
           let dataRows = response.data;
           this.$refs.batchEdit.open(dataRows.size);
           this.$refs.batchEdit.setAllDataRows(dataRows);
-          this.$refs.batchEdit.open(this.selectDataCounts);
+          this.$refs.batchEdit.open(this.$refs.scenarioTable.selectDataCounts);
         });
       } else {
         this.$refs.batchEdit.setAllDataRows(new Set());
-        this.$refs.batchEdit.open(this.selectDataCounts);
+        this.$refs.batchEdit.open(this.$refs.scenarioTable.selectDataCounts);
       }
     },
     handleBatchMove() {
@@ -611,10 +595,10 @@ export default {
       this.planVisible = false;
     },
     addTestPlan(params) {
-      let obj = {planIds: params[0], scenarioIds: this.selection};
+      let obj = {planIds: params[0], scenarioIds: this.$refs.scenarioTable.selectIds};
 
       // todo 选取全部数据
-      if (this.isSelectAllDate) {
+      if (this.condition.selectAll) {
         this.$warning("暂不支持批量添加所有场景到测试计划！");
       }
 
@@ -635,7 +619,7 @@ export default {
       }
     },
     buildBatchParam(param) {
-      param.ids = Array.from(this.selectRows).map(row => row.id);
+      param.ids = this.$refs.scenarioTable.selectIds;
       param.projectId = this.projectId;
       param.condition = this.condition;
     },
@@ -643,8 +627,8 @@ export default {
       this.$refs.runMode.open();
 
     },
-    orderBySelectRows(rows) {
-      let selectIds = Array.from(rows).map(row => row.id);
+    orderBySelectRows() {
+      let selectIds = this.$refs.scenarioTable.selectIds;
       let array = [];
       for (let i in this.tableData) {
         if (selectIds.indexOf(this.tableData[i].id) !== -1) {
@@ -660,44 +644,15 @@ export default {
       let run = {config: config};
       run.id = getUUID();
       //按照列表排序
-      let ids = this.orderBySelectRows(this.selectRows);
+      let ids = this.orderBySelectRows();
       run.ids = ids;
       run.projectId = this.projectId;
       run.condition = this.condition;
-      this.$post(url, run, response => {
-        let data = response.data;
+      this.$post(url, run, () => {
         this.runVisible = false;
         this.batchReportId = run.id;
       });
     },
-    handleSelectAll(selection) {
-      _handleSelectAll(this, selection, this.tableData, this.selectRows, this.condition);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-      this.$emit('selection', selection);
-    },
-    handleSelect(selection, row) {
-      _handleSelect(this, selection, row, this.selectRows);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-      this.$emit('selection', selection);
-    },
-
-    isSelectDataAll(data) {
-      // this.condition.selectAll = data;
-      // setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      // this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-      // toggleAllSelection(this.$refs.scenarioTable, this.tableData, this.selectRows);
-      this.condition.selectAll = data;
-      //设置勾选
-      toggleAllSelection(this.$refs.scenarioTable, this.tableData, this.selectRows);
-      //显示隐藏菜单
-      _handleSelectAll(this, this.tableData, this.tableData, this.selectRows);
-      //设置未选择ID(更新)
-      this.condition.unSelectIds = [];
-      //更新统计信息
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
     edit(row) {
       let data = JSON.parse(JSON.stringify(row));
       this.$emit('edit', data);
@@ -709,7 +664,7 @@ export default {
       });
     },
     handleBatchRestore() {
-      let ids = Array.from(this.selectRows).map(row => row.id);
+      let ids = this.$refs.scenarioTable.selectIds;
       this.$post("/api/automation/reduction", ids, response => {
         this.$success(this.$t('commons.save_success'));
         this.search();
@@ -802,26 +757,6 @@ export default {
         }
       });
     },
-    sort(column) {
-      // 每次只对一个字段排序
-      if (this.condition.orders) {
-        this.condition.orders = [];
-      }
-      _sort(column, this.condition);
-      this.search();
-    },
-    filter(filters) {
-      _filter(filters, this.condition);
-      this.search();
-    },
-    headerDragend(newWidth, oldWidth, column, event) {
-      let finalWidth = newWidth;
-      if (column.minWidth > finalWidth) {
-        finalWidth = column.minWidth;
-      }
-      column.width = finalWidth;
-      column.realWidth = finalWidth;
-    },
     openScenario(item) {
       this.$emit('openScenario', item);
     },
@@ -900,9 +835,9 @@ export default {
   height: 100% !important;
 }
 
-/deep/ .el-table__fixed {
-  height: 110px !important;
-}
+/*/deep/ .el-table__fixed {*/
+/*  height: 110px !important;*/
+/*}*/
 
 /deep/ .el-card__header {
   padding: 10px;
diff --git a/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue b/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
index 4aae77de8a..e01ec31f1d 100644
--- a/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
@@ -16,134 +16,81 @@
                 operator-width="170px"
                 @refresh="initTable"
                 ref="apitable">
-        <template v-for="(item, index) in tableLabel">
-          <ms-table-column
-            v-if="item.id == 'num'"
-            prop="num"
-            label="ID"
-            show-overflow-tooltip
-            min-width="80px"
-            sortable=true
-            :key="index">
-            <template slot-scope="scope">
-              <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
-              <span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
-              <el-tooltip v-else content="编辑">
-                <a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
-              </el-tooltip>
-            </template>
-          </ms-table-column>
-          <ms-table-column
-            v-if="item.id == 'name'"
-            prop="name"
-            :label="$t('api_test.definition.api_name')"
-            show-overflow-tooltip
-            sortable="custom"
-            width="120px"
-            :key="index"/>
-          <ms-table-column
-            v-if="item.id == 'status'"
-            prop="status"
-            column-key="status"
-            sortable="custom"
-            :filters="statusFilters"
-            :label="$t('api_test.definition.api_status')"
-            width="120px"
-            :key="index">
-            <template v-slot:default="scope">
-            <span class="el-dropdown-link">
-              <api-status :value="scope.row.status"/>
-            </span>
-            </template>
-          </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'method'"
-            prop="method"
-            sortable="custom"
-            column-key="method"
-            :filters="methodFilters"
-            :label="$t('api_test.definition.api_type')"
-            show-overflow-tooltip
-            width="120px"
-            :key="index">
-            <template v-slot:default="scope">
-              <el-tag size="mini"
-                      :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
-                      class="api-el-tag">
-                {{ scope.row.method }}
-              </el-tag>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="num"
+          label="ID"
+          min-width="80px"
+          sortable>
+          <template slot-scope="scope">
+            <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
+            <span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
+            <el-tooltip v-else content="编辑">
+              <a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
+            </el-tooltip>
+          </template>
+        </ms-table-column>
+        <ms-table-column
+          prop="name"
+          :label="$t('api_test.definition.api_name')"
+          sortable
+          width="120px"/>
 
-          <ms-table-column
-            v-if="item.id == 'userName'"
-            prop="userName"
-            sortable="custom"
-            :filters="userFilters"
-            column-key="user_id"
-            :label="$t('api_test.definition.api_principal')"
-            show-overflow-tooltip
-            width="100px"
-            :key="index"/>
+        <ms-table-column
+          prop="method"
+          sortable="custom"
+          column-key="method"
+          :filters="methodFilters"
+          :label="$t('api_test.definition.api_type')"
+          width="120px">
+          <template v-slot:default="scope">
+            <el-tag size="mini"
+                    :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
+                    class="api-el-tag">
+              {{ scope.row.method }}
+            </el-tag>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'path'"
-            prop="path"
-            width="120px"
-            :label="$t('api_test.definition.api_path')"
-            show-overflow-tooltip
-            :key="index"/>
+        <ms-table-column
+          prop="userName"
+          sortable="custom"
+          :filters="userFilters"
+          column-key="user_id"
+          :label="$t('api_test.definition.api_principal')"
+          width="100px"/>
 
-          <ms-table-column
-            v-if="item.id == 'tags'"
-            prop="tags"
-            :label="$t('commons.tag')"
-            width="120px"
-            :key="index">
-            <template v-slot:default="scope">
-              <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
-                      :show-tooltip="true" :content="itemName"
-                      style="margin-left: 0px; margin-right: 2px"/>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="path"
+          width="120px"
+          :label="$t('api_test.definition.api_path')"/>
 
-          <ms-table-column
-            v-if="item.id == 'updateTime'"
-            width="160"
-            :label="$t('api_test.definition.api_last_time')"
-            sortable="custom"
-            prop="updateTime"
-            :key="index">
-            <template v-slot:default="scope">
-              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="tags"
+          :label="$t('commons.tag')"
+          width="120px">
+          <template v-slot:default="scope">
+            <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
+                    :show-tooltip="true" :content="itemName"
+                    style="margin-left: 0px; margin-right: 2px"/>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'caseTotal'"
-            prop="caseTotal"
-            width="80px"
-            :label="$t('api_test.definition.api_case_number')"
-            show-overflow-tooltip
-            :key="index"/>
+        <ms-table-column
+          width="160"
+          :label="$t('api_test.definition.api_last_time')"
+          sortable="custom"
+          prop="updateTime">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'caseStatus'"
-            prop="caseStatus"
-            width="80px"
-            :label="$t('api_test.definition.api_case_status')"
-            show-overflow-tooltip
-            :key="index"/>
+        <ms-table-column
+          prop="caseTotal"
+          width="80px"
+          :label="$t('api_test.definition.api_case_number')"/>
 
-          <ms-table-column
-            v-if="item.id == 'casePassingRate'"
-            width="100px"
-            prop="casePassingRate"
-            :label="$t('api_test.definition.api_case_passing_rate')"
-            show-overflow-tooltip
-            :key="index"/>
-        </template>
       </ms-table>
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
@@ -169,8 +116,8 @@
   import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
   import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
   import TableSelectCountBar from "./TableSelectCountBar";
-  import {_filter, _handleSelect, _handleSelectAll, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils";
-  import {API_LIST, WORKSPACE_ID} from "@/common/js/constants";
+  import {_filter, _sort, buildBatchParam, getLabel,} from "@/common/js/tableUtils";
+  import {WORKSPACE_ID} from "@/common/js/constants";
   import {getCurrentProjectID} from "@/common/js/utils";
 
   export default {
@@ -194,7 +141,6 @@
       return {
         condition: {},
         selectCase: {},
-        tableLabel: [],
         result: {},
         moduleId: "",
         deletePath: "/test/case/delete",
@@ -328,8 +274,6 @@
             }
           });
         });
-        //添加自定义列的查询
-        getLabel(this, API_LIST);
       },
 
       showExecResult(row) {
diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index fa9ba38755..91c5925652 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -171,7 +171,6 @@ import ApiDocumentsPage from "@/business/components/api/definition/components/li
 import MsTableButton from "@/business/components/common/components/MsTableButton";
 import MsTabButton from "@/business/components/common/components/MsTabButton";
 import {getLabel} from "@/common/js/tableUtils";
-import {API_CASE_LIST, API_LIST} from "@/common/js/constants";
 
 import MockConfig from "@/business/components/api/definition/components/mock/MockConfig";
 
@@ -253,12 +252,6 @@ export default {
     if (dataRange && dataRange.length > 0) {
       this.activeDom = 'middle';
     }
-    if (this.activeDom === 'left') {
-      getLabel(this, API_LIST);
-    } else if (this.activeDom === 'right') {
-      getLabel(this, API_CASE_LIST);
-
-    }
   },
   watch: {
     currentProtocol() {
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index 59c04286e9..efd6d8af04 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -9,68 +9,70 @@
                 v-model="condition.name"/>
 
       <ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
-                :total="total" enableSelection
-                :batch-operators="buttons" :screenHeight="screenHeight"
+                :total="total"
+                :operators="operators"
+                :batch-operators="buttons"
+                :screenHeight="screenHeight"
+                :fields.sync="fields"
+                field-key="API_CASE"
                 operator-width="170px"
                 @refresh="initTable"
                 ref="caseTable"
       >
-        <template v-for="(item, index) in tableLabel">
+        <span v-for="(item) in fields" :key="item.key">
 
           <ms-table-column
-              v-if="item.id == 'num'"
               prop="num"
               label="ID"
-              show-overflow-tooltip
-              width="80px"
-              sortable=true
-              :key="index">
+              :field="item"
+              :fields-width="fieldsWidth"
+              min-width="80px"
+              sortable>
             <template slot-scope="scope">
               <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
               <span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>
               <el-tooltip v-else content="编辑">
-                <a style="cursor:pointer" @click="editApi(scope.row)"> {{ scope.row.num }} </a>
+                <a style="cursor:pointer" @click="handleTestCase(scope.row)"> {{ scope.row.num }} </a>
               </el-tooltip>
             </template>
           </ms-table-column>
 
-          <ms-table-column v-if="item.id == 'name'" prop="name" width="160px" :label="$t('test_track.case.name')"
-                           show-overflow-tooltip :key="index"/>
+          <ms-table-column
+            :field="item"
+            :fields-width="fieldsWidth"
+            prop="name"
+            min-width="160px"
+            :label="$t('test_track.case.name')"/>
 
           <ms-table-column
-              v-if="item.id == 'priority'"
               prop="priority"
               :filters="priorityFilters"
-              column-key="priority"
-              width="120px"
-              :label="$t('test_track.case.priority')"
-              show-overflow-tooltip
-              :key="index">
+              :field="item"
+              :fields-width="fieldsWidth"
+              min-width="120px"
+              :label="$t('test_track.case.priority')">
             <template v-slot:default="scope">
               <priority-table-item :value="scope.row.priority"/>
             </template>
           </ms-table-column>
 
           <ms-table-column
-              v-if="item.id == 'path'"
               sortable="custom"
               prop="path"
-              width="180px"
-              :label="'API'+ $t('api_test.definition.api_path')"
-              show-overflow-tooltip
-              :key="index"/>
+              min-width="180px"
+              :field="item"
+              :fields-width="fieldsWidth"
+              :label="'API'+ $t('api_test.definition.api_path')"/>
 
           <ms-table-column
-              v-if="item.id == 'casePath'"
               sortable="custom"
               prop="casePath"
-              width="180px"
-              :label="$t('api_test.definition.request.case')+ $t('api_test.definition.api_path')"
-              show-overflow-tooltip
-              :key="index"/>
+              min-width="180px"
+              :field="item"
+              :fields-width="fieldsWidth"
+              :label="$t('api_test.definition.request.case')+ $t('api_test.definition.api_path')"/>
 
-          <ms-table-column v-if="item.id=='tags'" prop="tags" width="120px" :label="$t('commons.tag')"
-                           :key="index">
+          <ms-table-column v-if="item.id=='tags'" prop="tags" width="120px" :label="$t('commons.tag')">
             <template v-slot:default="scope">
               <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
                       :content="itemName" style="margin-left: 0px; margin-right: 2px"/>
@@ -78,54 +80,32 @@
           </ms-table-column>
 
           <ms-table-column
-              v-if="item.id=='createUser'"
               prop="createUser"
-              :label="'创建人'"
-              show-overflow-tooltip
-              :key="index"/>
+              :field="item"
+              :fields-width="fieldsWidth"
+              :label="'创建人'"/>
 
           <ms-table-column
-              v-if="item.id=='updateTime'"
               sortable="updateTime"
-              width="160px"
+              min-width="160px"
+              :field="item"
+              :fields-width="fieldsWidth"
               :label="$t('api_test.definition.api_last_time')"
-              prop="updateTime"
-              :key="index">
+              prop="updateTime">
             <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </ms-table-column>
+        </span>
+
+        <template v-slot:opt-behind="scope">
+          <ms-api-case-table-extend-btns @showCaseRef="showCaseRef"
+                                         @showEnvironment="showEnvironment"
+                                         @createPerformance="createPerformance" :row="scope.row"/>
         </template>
-        <el-table-column fixed="right" v-if="!isReadOnly" :label="$t('commons.operating')" min-width="160"
-                         align="center">
-          <template slot="header">
-            <header-label-operate @exec="customHeader"/>
-          </template>
-          <template v-slot:default="scope">
-            <div>
-              <ms-table-operator-button class="run-button"
-                                        :tip="$t('api_test.automation.execute')"
-                                        icon="el-icon-video-play"
-                                        v-permission="['PROJECT_API_DEFINITION:READ+RUN']"
-                                        @exec="runTestCase(scope.row)"/>
-              <ms-table-operator-button :tip="$t('commons.edit')" icon="el-icon-edit" @exec="handleTestCase(scope.row)"
-                                        v-permission="['PROJECT_API_DEFINITION:READ+EDIT_CASE']"
-              />
-              <ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete"
-                                        @exec="handleDelete(scope.row)"
-                                        v-permission="['PROJECT_API_DEFINITION:READ+DELETE_CASE']"
-                                        type="danger"/>
-              <ms-api-case-table-extend-btns @showCaseRef="showCaseRef"
-                                             @showEnvironment="showEnvironment"
-                                             @createPerformance="createPerformance" :row="scope.row"/>
-            </div>
-          </template>
-        </el-table-column>
 
       </ms-table>
 
-      <header-custom ref="headerCustom" :initTableData="initTable" :optionalFields=headerItems
-                     :type=type></header-custom>
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
     </div>
@@ -171,17 +151,19 @@ import {parseEnvironment} from "@/business/components/api/test/model/Environment
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
 import {API_CASE_CONFIGS} from "@/business/components/common/components/search/search-components";
-import {_filter, _handleSelect, _handleSelectAll, _sort, deepClone, getLabel} from "@/common/js/tableUtils";
+import {
+  _filter,
+  _sort,
+  getCustomTableHeader,
+  getCustomTableWidth,
+} from "@/common/js/tableUtils";
 import {API_CASE_LIST} from "@/common/js/constants";
-import {Api_Case_List} from "@/business/components/common/model/JsonData";
-import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 
 export default {
   name: "ApiCaseSimpleList",
   components: {
     HeaderLabelOperate,
-    HeaderCustom,
     MsTableHeaderSelectPopover,
     MsSetEnvironment,
     ApiCaseList,
@@ -204,8 +186,8 @@ export default {
   data() {
     return {
       type: API_CASE_LIST,
-      headerItems: Api_Case_List,
-      tableLabel: [],
+      fields: getCustomTableHeader('API_CASE'),
+      fieldsWidth: getCustomTableWidth('API_CASE'),
       condition: {
         components: API_CASE_CONFIGS
       },
@@ -219,6 +201,27 @@ export default {
         {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
         {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
       ],
+      operators: [
+        {
+          tip: this.$t('api_test.automation.execute'),
+          icon: "el-icon-video-play",
+          exec: this.runTestCase,
+          permissions: ['PROJECT_API_DEFINITION:READ+RUN']
+        },
+        {
+          tip: this.$t('commons.edit'),
+          icon: "el-icon-edit",
+          exec: this.handleTestCase,
+          permissions: ['PROJECT_API_DEFINITION:READ+EDIT_CASE']
+        },
+        {
+          tip: this.$t('commons.delete'),
+          exec: this.handleDelete,
+          icon: "el-icon-delete",
+          type: "danger",
+          permissions: ['PROJECT_API_DEFINITION:READ+DELETE_CASE']
+        },
+      ],
       typeArr: [
         {id: 'priority', name: this.$t('test_track.case.priority')},
         {id: 'method', name: this.$t('api_test.definition.api_type')},
@@ -321,8 +324,7 @@ export default {
   },
   methods: {
     customHeader() {
-      const list = deepClone(this.tableLabel);
-      this.$refs.headerCustom.open(list);
+      this.$refs.caseTable.openCustomHeader();
     },
     initTable() {
       if (this.$refs.caseTable) {
@@ -381,8 +383,6 @@ export default {
           })
         });
       }
-      getLabel(this, API_CASE_LIST);
-
     },
 
     open() {
diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index 54a4c8a7bd..2d3d6f8353 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -13,20 +13,20 @@
                 :batch-operators="trashEnable ? trashButtons : buttons" :screen-height="screenHeight"
                 :operators="tableOperatorButtons" operator-width="200px"
                 @refresh="initTable"
-                @openCustomHeader="customHeader"
+                :fields.sync="fields"
                 :table-is-loading="this.result.loading"
-                ref="apiDefinitionTable"
-      >
-        <template v-for="(item, index) in tableLabel">
+                field-key="API_DEFINITION"
+                ref="apiDefinitionTable">
+
+        <span v-for="(item) in fields" :key="item.key">
           <ms-table-column
-            v-if="item.id == 'num'"
-            prop="num"
-            label="ID"
-            show-overflow-tooltip
-            min-width="80px"
-            sortable=true
-            :key="index"
-          >
+               prop="num"
+               label="ID"
+               :field="item"
+               min-width="100px"
+               :fields-width="fieldsWidth"
+               sortable>
+
             <template slot-scope="scope">
               <!-- 判断为只读用户的话不可点击ID进行编辑操作 -->
               <!--<span style="cursor:pointer" v-if="isReadOnly"> {{ scope.row.num }} </span>-->
@@ -38,125 +38,112 @@
               </el-tooltip>
             </template>
           </ms-table-column>
-          <ms-table-column
-            v-if="item.id == 'name'"
-            prop="name"
-            :label="$t('api_test.definition.api_name')"
-            show-overflow-tooltip
-            sortable="custom"
-            width="120px"
-            :key="index"/>
-          <ms-table-column
-            v-if="item.id == 'status'"
-            prop="status"
-            column-key="status"
-            sortable="custom"
-            :filters="statusFilters"
-            :label="$t('api_test.definition.api_status')"
-            width="120px"
-            :key="index"
-          >
-            <template v-slot:default="scope">
-            <span class="el-dropdown-link">
-              <api-status :value="scope.row.status"/>
-            </span>
-            </template>
-          </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'method'"
-            prop="method"
-            sortable="custom"
-            column-key="method"
-            :filters="methodFilters"
-            :label="$t('api_test.definition.api_type')"
-            show-overflow-tooltip
-            width="120px"
-            :key="index">
-            <template v-slot:default="scope" class="request-method">
-              <el-tag size="mini"
-                      :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
-                      class="api-el-tag">
-                {{ scope.row.method }}
-              </el-tag>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="name"
+          :label="$t('api_test.definition.api_name')"
+          sortable="custom"
+          :fields-width="fieldsWidth"
+          min-width="120"
+          :field="item"/>
 
-          <ms-table-column
-            v-if="item.id == 'userName'"
-            prop="userName"
-            sortable="custom"
-            :filters="userFilters"
-            column-key="user_id"
-            :label="$t('api_test.definition.api_principal')"
-            show-overflow-tooltip
-            width="145px"
-            :key="index"/>
+        <ms-table-column
+          prop="status"
+          sortable="custom"
+          :filters="statusFilters"
+          :field="item"
+          :fields-width="fieldsWidth"
+          min-width="120px"
+          :label="$t('api_test.definition.api_status')">
 
-          <ms-table-column
-            v-if="item.id == 'path'"
-            prop="path"
-            width="120px"
-            :label="$t('api_test.definition.api_path')"
-            show-overflow-tooltip
-            :key="index"/>
+          <template v-slot:default="scope">
+          <span class="el-dropdown-link">
+            <api-status :value="scope.row.status"/>
+          </span>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'tags'"
-            prop="tags"
-            :label="$t('commons.tag')"
-            width="120px"
-            :key="index">
-            <template v-slot:default="scope">
-              <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
-                      :show-tooltip="true" :content="itemName"
-                      style="margin-left: 0px; margin-right: 2px"/>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="method"
+          sortable="custom"
+          :field="item"
+          :filters="methodFilters"
+          :fields-width="fieldsWidth"
+          min-width="120px"
+          :label="$t('api_test.definition.api_type')">
+          <template v-slot:default="scope" class="request-method">
+            <el-tag size="mini"
+                    :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
+                    class="api-el-tag">
+              {{ scope.row.method }}
+            </el-tag>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'updateTime'"
-            width="200"
-            :label="$t('api_test.definition.api_last_time')"
-            sortable="custom"
-            prop="updateTime"
-            :key="index">
-            <template v-slot:default="scope">
-              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-            </template>
-          </ms-table-column>
+        <ms-table-column
+          prop="userName"
+          sortable="custom"
+          :filters="userFilters"
+          :field="item"
+          :fields-width="fieldsWidth"
+          min-width="100px"
+          :label="$t('api_test.definition.api_principal')"/>\
+        <ms-table-column
+          prop="path"
+          :field="item"
+          :fields-width="fieldsWidth"
+          min-width="100px"
+          :label="$t('api_test.definition.api_path')"/>
 
-          <ms-table-column
-            v-if="item.id == 'caseTotal'"
-            prop="caseTotal"
-            sortable="custom"
-            width="140px"
-            :label="$t('api_test.definition.api_case_number')"
-            show-overflow-tooltip
-            :key="index"/>
+        <ms-table-column
+          prop="tags"
+          :field="item"
+          :fields-width="fieldsWidth"
+          min-width="100px"
+          :label="$t('commons.tag')">
+          <template v-slot:default="scope">
+            <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
+                    :show-tooltip="true" :content="itemName"
+                    style="margin-left: 0px; margin-right: 2px"/>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'caseStatus'"
-            prop="caseStatus"
-            :filters="caseStatusFilters"
-            width="130px"
-            :label="$t('api_test.definition.api_case_status')"
-            show-overflow-tooltip
-            :key="index"
-          />
+        <ms-table-column
+          :label="$t('api_test.definition.api_last_time')"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable="custom"
+          min-width="140px"
+          prop="updateTime">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+          </template>
+        </ms-table-column>
 
-          <ms-table-column
-            v-if="item.id == 'casePassingRate'"
-            width="150px"
-            prop="casePassingRate"
-            sortable="custom"
-            :label="$t('api_test.definition.api_case_passing_rate')"
-            show-overflow-tooltip
-            :key="index"/>
-        </template>
+        <ms-table-column
+          prop="caseTotal"
+          :field="item"
+          :fields-width="fieldsWidth"
+          min-width="100px"
+          sortable
+          :label="$t('api_test.definition.api_case_number')"/>
+
+        <ms-table-column
+          :field="item"
+          prop="caseStatus"
+          :fields-width="fieldsWidth"
+          min-width="100px"
+          :label="$t('api_test.definition.api_case_status')"/>
+
+        <ms-table-column
+          prop="casePassingRate"
+          :field="item"
+          min-width="120px"
+          sortable
+          :fields-width="fieldsWidth"
+          :label="$t('api_test.definition.api_case_passing_rate')"/>
+        </span>
       </ms-table>
-      <header-custom ref="headerCustom" :initTableData="initTable" :optionalFields=headerItems
-                     :type=type></header-custom>
       <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
     </div>
@@ -183,7 +170,6 @@ import MsApiCaseList from "../case/ApiCaseList";
 import MsContainer from "../../../../common/components/MsContainer";
 import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
 import MsBottomContainer from "../BottomContainer";
-import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
 import MsBatchEdit from "../basis/BatchEdit";
 import {API_METHOD_COLOUR, API_STATUS, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from "../../model/JsonData";
 import {downloadFile, getCurrentProjectID} from "@/common/js/utils";
@@ -194,9 +180,10 @@ import MsTableAdvSearchBar from "@/business/components/common/components/search/
 import {API_DEFINITION_CONFIGS} from "@/business/components/common/components/search/search-components";
 import MsTipButton from "@/business/components/common/components/MsTipButton";
 import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
-import {_filter, _sort, buildBatchParam, getLabel, initCondition, deepClone} from "@/common/js/tableUtils";
-import {Api_List} from "@/business/components/common/model/JsonData";
-import HeaderCustom from "@/business/components/common/head/HeaderCustom";
+import {
+  initCondition,
+  getCustomTableHeader, getCustomTableWidth, buildBatchParam
+} from "@/common/js/tableUtils";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import {Body} from "@/business/components/api/definition/model/ApiTestModel";
 import {buildNodePath} from "@/business/components/api/definition/model/NodeTree";
@@ -206,7 +193,6 @@ export default {
   name: "ApiList",
   components: {
     HeaderLabelOperate,
-    HeaderCustom,
     CaseBatchMove,
     ApiStatus,
     MsTableHeaderSelectPopover,
@@ -219,7 +205,6 @@ export default {
     MsApiCaseList,
     MsContainer,
     MsBottomContainer,
-    ShowMoreBtn,
     MsBatchEdit,
     MsTipButton,
     MsTableAdvSearchBar,
@@ -229,8 +214,8 @@ export default {
   data() {
     return {
       type: API_LIST,
-      headerItems: Api_List,
-      tableLabel: [],
+      fields: getCustomTableHeader('API_DEFINITION'),
+      fieldsWidth: getCustomTableWidth('API_DEFINITION'),
       condition: {
         components: API_DEFINITION_CONFIGS
       },
@@ -452,10 +437,6 @@ export default {
     }
   },
   methods: {
-    customHeader() {
-      const list = deepClone(this.tableLabel);
-      this.$refs.headerCustom.open(list);
-    },
     handleBatchMove() {
       this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
     },
@@ -515,7 +496,6 @@ export default {
           });
         });
       }
-      getLabel(this, API_LIST);
       if(this.needRefreshModule()){
         this.$emit("refreshTree");
       }
@@ -798,18 +778,6 @@ export default {
         console.log(e);
       }
     },
-    sort(column) {
-      // 每次只对一个字段排序
-      if (this.condition.orders) {
-        this.condition.orders = [];
-      }
-      _sort(column, this.condition);
-      this.initTable();
-    },
-    filter(filters) {
-      _filter(filters, this.condition);
-      this.initTable();
-    },
     headerDragend(newWidth, oldWidth, column, event) {
       let finalWidth = newWidth;
       if (column.minWidth > finalWidth) {
diff --git a/frontend/src/business/components/common/components/table/Ms-table-column.vue b/frontend/src/business/components/common/components/table/Ms-table-column.vue
index ff5effc485..113fe4dd1c 100644
--- a/frontend/src/business/components/common/components/table/Ms-table-column.vue
+++ b/frontend/src/business/components/common/components/table/Ms-table-column.vue
@@ -1,8 +1,8 @@
 <template>
   <el-table-column
-      v-if="fields.has(prop) || fields.size < 1"
+      v-if="!field || field.id === prop"
       :min-width="minWidth"
-      :width="width"
+      :width="fieldsWidth ? fieldsWidth[prop] : width"
       :fixed="fixed"
       :filters="filters"
       :prop="prop"
@@ -42,12 +42,15 @@ export default {
         return false;
       }
     },
-    fields: {
-      type: Set,
+    // 判断是否显示自定义列
+    field: {
+      type: Object,
       default() {
-        return new Set();
+        return null;
       }
     },
+    // 保存自定义列宽
+    fieldsWidth: Object
   }
 };
 </script>
diff --git a/frontend/src/business/components/common/components/table/MsCustomTableHeader.vue b/frontend/src/business/components/common/components/table/MsCustomTableHeader.vue
new file mode 100644
index 0000000000..ad2f7aa0bc
--- /dev/null
+++ b/frontend/src/business/components/common/components/table/MsCustomTableHeader.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog :title="$t('table.header_display_field')" :visible.sync="visible" :append-to-body="true">
+    <tree-transfer :title="[$t('table.fields_to_be_selected'), $t('table.selected_fields')]"
+                   :from_data='fromFields'
+                   :draggable="true"
+                   :to_data='selectedFields'
+                   :defaultProps="{label:'label'}"
+                   :allow-drop="allowDrop"
+                   :default-checked-keys="selectedKeys"
+                   :default-transfer="defaultTransfer"
+                   :mode='mode' height='540px' filter openAll/>
+    <template v-slot:footer>
+      <ms-dialog-footer @cancel="close" @confirm="saveHeader"/>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+import treeTransfer from 'el-tree-transfer'
+import {saveCustomTableHeader} from "@/common/js/tableUtils";
+import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header";
+
+export default {
+  name: "MsCustomTableHeader",
+  components: {MsDialogFooter, treeTransfer},
+  data() {
+    return {
+      visible: false,
+      value: [],
+      fromFields: [],
+      selectedFields: [],
+      selectedKeys: [],
+      defaultTransfer: true,
+      mode: "transfer", // transfer addressList
+    }
+  },
+  props: {
+    type: String,
+  },
+  methods: {
+    allowDrop(draggingNode, dropNode, type) {
+      return type !== 'inner';
+    },
+    open(items) {
+      items = JSON.parse(JSON.stringify(items));
+      let fields = JSON.parse(JSON.stringify(CUSTOM_TABLE_HEADER[this.type]));
+      this.selectedKeys = [];
+      this.fromFields = [];
+      this.selectedKeys = items.map(item => item.key);
+      this.selectedFields = items;
+      fields.forEach(field => {
+        if (this.selectedKeys.indexOf(field.key) < 0) {
+          this.fromFields.push(field);
+        }
+      });
+      this.visible = true;
+    },
+    saveHeader() {
+      saveCustomTableHeader(this.type, this.selectedFields);
+      this.$success(this.$t("commons.save_success"));
+      this.$emit('reload');
+      this.close();
+    },
+    removeAt(idx) {
+      this.list.splice(idx, 1);
+    },
+    close() {
+      this.visible = false
+    },
+
+    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
+    // changeMode() {
+    //   if (this.mode == "transfer") {
+    //     this.mode = "addressList";
+    //   } else {
+    //     this.mode = "transfer";
+    //   }
+    // },
+    // // 监听穿梭框组件添加
+    // add(fromData, toData, obj){
+    //   // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
+    //   // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
+    //   console.log("fromData:", fromData);
+    //   console.log("toData:", toData);
+    //   console.log("obj:", obj);
+    // },
+    // // 监听穿梭框组件移除
+    // remove(fromData, toData, obj){
+    //   // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
+    //   // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
+    //   console.log("fromData:", fromData);
+    //   console.log("toData:", toData);
+    //   console.log("obj:", obj);
+    // }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/common/components/table/MsTable.vue b/frontend/src/business/components/common/components/table/MsTable.vue
index a93c057781..c9bd95489e 100644
--- a/frontend/src/business/components/common/components/table/MsTable.vue
+++ b/frontend/src/business/components/common/components/table/MsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="tableActive">
     <el-table
       border
       :data="data"
@@ -10,7 +10,7 @@
       @header-dragend="headerDragend"
       @cell-mouse-enter="showPopover"
       class="test-content adjust-table ms-table"
-      :class="{'ms-select-all-fixed':showSelectAll}"
+      :class="{'ms-select-all-fixed': showSelectAll}"
       :height="screenHeight"
       v-loading="tableIsLoading"
       ref="table" @row-click="handleRowClick">
@@ -23,7 +23,8 @@
                                       @selectPageAll="isSelectDataAll(false)"
                                       @selectAll="isSelectDataAll(true)"/>
 
-      <el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0" width="40"
+      <el-table-column v-if="enableSelection && batchOperators && batchOperators.length > 0" width="30"
+                       fixed="left"
                        :resizable="false" align="center">
         <template v-slot:default="scope">
           <!-- 选中记录后浮现的按钮，提供对记录的批量操作 -->
@@ -39,15 +40,24 @@
         fixed="right"
         :label="$t('commons.operating')">
         <template slot="header">
-          <header-label-operate @exec="openCustomHeader"/>
+          <header-label-operate v-if="fieldKey" @exec="openCustomHeader"/>
         </template>
         <template v-slot:default="scope">
           <div>
+            <slot name="opt-before" :row="scope.row"></slot>
             <ms-table-operators :buttons="operators" :row="scope.row" :index="scope.$index"/>
+            <slot name="opt-behind" :row="scope.row"></slot>
           </div>
         </template>
       </el-table-column>
     </el-table>
+
+    <ms-custom-table-header
+      v-if="fieldKey"
+      @reload="reloadTable"
+      :type="fieldKey"
+      ref="customTableHeader"/>
+
   </div>
 </template>
 
@@ -59,7 +69,7 @@ import {
   getSelectDataCounts,
   setUnSelectIds,
   toggleAllSelection,
-  checkTableRowIsSelect,
+  checkTableRowIsSelect, getCustomTableHeader, saveCustomTableWidth,
 } from "@/common/js/tableUtils";
 import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
 import {TEST_CASE_LIST} from "@/common/js/constants";
@@ -69,10 +79,24 @@ import MsTableColumn from "@/business/components/common/components/table/Ms-tabl
 import MsTableOperators from "@/business/components/common/components/MsTableOperators";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
+import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
 
+/**
+ * 参考 ApiList
+ *
+ * 添加自定义表头步骤：
+ *   设置 fieldKey,
+ *   设置 fields,
+ *   ms-table-column 外层加循环，并设置 field
+ *   （操作按钮使用 Mstable 里的操作逻辑，要自定义可以使用插画槽 opt-before，opt-behind）
+ * 记住列宽步骤：
+ *   设置 fieldKey,
+ *   ms-table-column 设置 fields-width
+ */
 export default {
   name: "MsTable",
   components: {
+    MsCustomTableHeader,
     HeaderLabelOperate,
     MsTableOperators, MsTableColumn, ShowMoreBtn, MsTablePagination, MsTableHeaderSelectPopover, HeaderCustom
   },
@@ -80,7 +104,8 @@ export default {
     return {
       selectDataCounts: 0,
       selectRows: new Set(),
-      selectIds: []
+      selectIds: [],
+      tableActive: true
     };
   },
   props: {
@@ -157,7 +182,9 @@ export default {
       default() {
         return false;
       }
-    }
+    },
+    fields: Array,
+    fieldKey: String,
   },
   mounted() {
     getLabel(this, TEST_CASE_LIST);
@@ -170,11 +197,8 @@ export default {
     },
   },
   methods: {
-    openCustomHeader() {
-      this.$emit("openCustomHeader");
-    },
     handleSelectAll(selection) {
-      _handleSelectAll(this, selection, this.data, this.selectRows);
+      _handleSelectAll(this, selection, this.data, this.selectRows, this.condition);
       setUnSelectIds(this.data, this.condition, this.selectRows);
       this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
       this.selectIds = Array.from(this.selectRows).map(o => o.id);
@@ -198,12 +222,8 @@ export default {
       this.selectIds = Array.from(this.selectRows).map(o => o.id);
     },
     headerDragend(newWidth, oldWidth, column, event) {
-      // let finalWidth = newWidth;
-      // if (column.minWidth > finalWidth) {
-      //   finalWidth = column.minWidth;
-      // }
-      // column.width = finalWidth;
-      // column.realWidth = finalWidth;
+      // 保存列宽
+      saveCustomTableWidth(this.fieldKey, column.columnKey, newWidth);
     },
     showPopover(row, column, cell) {
       if (column.property === 'name') {
@@ -257,11 +277,23 @@ export default {
     clearSelectRows() {
       this.selectRows.clear();
       this.selectIds = [];
+      this.condition.selectAll = false;
+      this.condition.unSelectIds = [];
       this.selectDataCounts = 0;
       if (this.$refs.table) {
         this.$refs.table.clearSelection();
       }
     },
+    openCustomHeader() {
+      this.$refs.customTableHeader.open(this.fields);
+    },
+    reloadTable() {
+      this.$emit('update:fields', getCustomTableHeader(this.fieldKey));
+      this.tableActive = false;
+      this.$nextTick(() => {
+        this.tableActive = true;
+      });
+    }
   }
 };
 </script>
diff --git a/frontend/src/business/components/common/components/table/MsTableHeaderSelectPopover.vue b/frontend/src/business/components/common/components/table/MsTableHeaderSelectPopover.vue
index 61b8017848..bad08882c9 100644
--- a/frontend/src/business/components/common/components/table/MsTableHeaderSelectPopover.vue
+++ b/frontend/src/business/components/common/components/table/MsTableHeaderSelectPopover.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-table-column v-if="isShow" width="1" :resizable="false" align="center">
+  <el-table-column v-if="isShow" width="1" :resizable="false" fixed="left" align="center">
     <el-popover slot="header" placement="right" trigger="click" style="margin-right: 0px;">
       <el-link
         :class="{'selected-link': selectDataCounts === total}"
@@ -21,7 +21,7 @@
           </span>
       </el-link>
 
-      <i class="el-icon-arrow-down" slot="reference"></i>
+      <i class="el-icon-arrow-down table-select-icon" slot="reference"></i>
     </el-popover>
   </el-table-column>
 </template>
diff --git a/frontend/src/business/components/common/model/JsonData.js b/frontend/src/business/components/common/model/JsonData.js
index a62e8a80be..faa41df3ac 100644
--- a/frontend/src/business/components/common/model/JsonData.js
+++ b/frontend/src/business/components/common/model/JsonData.js
@@ -54,33 +54,8 @@ export const Api_List = [
   {id: 'casePassingRate', label: i18n.t('api_test.definition.api_case_passing_rate')},
   {id: 'status', label: i18n.t('api_test.definition.api_status')}
 ]
-//接口定义-case列表
-export const Api_Case_List = [
-  {id: 'num', label: "ID"},
-  {id: 'name', label: i18n.t('test_track.case.name')},
-  {id: 'priority', label: i18n.t('test_track.case.priority')},
-  {id: 'path', label: 'API'+i18n.t('api_test.definition.api_path')},
-  {id: 'casePath', label: i18n.t('api_test.definition.request.case')+i18n.t('api_test.definition.api_path')},
-  {id: 'tags', label: i18n.t('commons.tag')},
-  {id: 'createUser', label: "创建人"},
-  {id: 'updateTime', label: i18n.t('api_test.definition.api_last_time')},
-]
-//接口自动化-场景列表
-export const Api_Scenario_List = [
-  {id: 'num', label: "ID"},
-  {id: 'name', label: i18n.t('api_report.scenario_name')},
-  {id: 'level', label: i18n.t('api_test.automation.case_level')},
-  {id: 'status', label: i18n.t('test_track.plan.plan_status')},
-  {id: 'tags', label: i18n.t('commons.tag')},
-  {id: 'userId', label: i18n.t('api_test.automation.creator')},
-  {id: 'principal', label: i18n.t('api_test.definition.api_principal')},
-  {id: 'updateTime', label: i18n.t('api_test.definition.api_last_time')},
-  {id: 'stepTotal', label: i18n.t('api_test.automation.step')},
-  {id: 'lastResult', label: i18n.t('api_test.automation.last_result')},
-  {id: 'passRate', label: i18n.t('api_test.automation.passing_rate')},
 
 
-]
 //测试评审-测试用例
 export const Test_Case_Review_Case_List = [
   {id: 'num', label: i18n.t('commons.id')},
diff --git a/frontend/src/business/components/settings/workspace/template/CustomFieldList.vue b/frontend/src/business/components/settings/workspace/template/CustomFieldList.vue
index 312343fb7e..b3106d5466 100644
--- a/frontend/src/business/components/settings/workspace/template/CustomFieldList.vue
+++ b/frontend/src/business/components/settings/workspace/template/CustomFieldList.vue
@@ -13,13 +13,19 @@
       :total="total"
       :page-size.sync="pageSize"
       :operators="operators"
+      :fields.sync="fields"
+      :enable-selection="false"
+      field-key="CUSTOM_FIELD"
       :screen-height="tableHeight"
       @handlePageChange="getCustomFields"
       @refresh="getCustomFields">
 
+      <div v-for="(item) in fields" :key="item.key">
+
         <ms-table-column
+          :field="item"
+          :fields-width="fieldsWidth"
           :label="$t('commons.name')"
-          :fields="fields"
           prop="name">
           <template v-slot="scope">
             <span v-if="scope.row.system">
@@ -33,8 +39,9 @@
 
         <ms-table-column
           :label="$t('custom_field.scene')"
-          :fields="fields"
+          :field="item"
           :filters="sceneFilters"
+          :fields-width="fieldsWidth"
           prop="scene">
           <template v-slot="scope">
             <span>{{ sceneMap[scope.row.scene] }}</span>
@@ -42,9 +49,10 @@
         </ms-table-column>
 
         <ms-table-column
+          :field="item"
           :label="$t('custom_field.attribute_type')"
-          :fields="fields"
           :filters="fieldFilters"
+          :fields-width="fieldsWidth"
           prop="type">
           <template v-slot="scope">
             <span>{{ fieldTypeMap[scope.row.type] }}</span>
@@ -53,7 +61,8 @@
 
         <ms-table-column
           :label="$t('custom_field.system_field')"
-          :fields="fields"
+          :field="item"
+          :fields-width="fieldsWidth"
           prop="system">
           <template v-slot="scope">
             <span v-if="scope.row.system">
@@ -67,14 +76,16 @@
 
         <ms-table-column
           :label="$t('commons.remark')"
-          :fields="fields"
+          :field="item"
+          :fields-width="fieldsWidth"
           prop="remark">
         </ms-table-column>
 
         <ms-table-column
           sortable
           :label="$t('commons.create_time')"
-          :fields="fields"
+          :field="item"
+          :fields-width="fieldsWidth"
           prop="createTime">
           <template v-slot="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
@@ -84,13 +95,16 @@
         <ms-table-column
           sortable
           :label="$t('commons.update_time')"
-          :fields="fields"
+          :field="item"
+          :fields-width="fieldsWidth"
           prop="updateTime">
           <template v-slot="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </ms-table-column>
 
+      </div>
+
     </ms-table>
 
     <ms-table-pagination :change="getCustomFields" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"/>
@@ -107,7 +121,6 @@
 import MsTable from "@/business/components/common/components/table/MsTable";
 import {getCurrentWorkspaceId, getDefaultTableHeight} from "@/common/js/utils";
 import MsTableColumn from "@/business/components/common/components/table/Ms-table-column";
-import {CUSTOM_FIELD_LIST} from "@/common/js/default-table-header";
 import MsTableOperators from "@/business/components/common/components/MsTableOperators";
 import MsTableButton from "@/business/components/common/components/MsTableButton";
 import CustomFieldEdit from "@/business/components/settings/workspace/template/CustomFieldEdit";
@@ -119,9 +132,15 @@ import {
   SCENE_MAP, SYSTEM_FIELD_NAME_MAP
 } from "@/common/js/table-constants";
 import MsTableHeader from "@/business/components/common/components/MsTableHeader";
+import HeaderCustom from "@/business/components/common/head/HeaderCustom";
+import {getCustomTableHeader, getCustomTableWidth} from "@/common/js/tableUtils";
+import MsCustomTableHeader from "@/business/components/common/components/table/MsCustomTableHeader";
+
 export default {
   name: "CustomFieldList",
   components: {
+    MsCustomTableHeader,
+    HeaderCustom,
     MsTableHeader,
     MsTablePagination, CustomFieldEdit, MsTableButton, MsTableOperators, MsTableColumn, MsTable},
   data() {
@@ -132,6 +151,8 @@ export default {
       pageSize: 10,
       currentPage: 1,
       result: {},
+      fields: getCustomTableHeader('CUSTOM_FIELD'),
+      fieldsWidth: getCustomTableWidth('CUSTOM_FIELD'),
       operators: [
         {
           tip: this.$t('commons.edit'), icon: "el-icon-edit",
@@ -152,9 +173,6 @@ export default {
     this.getCustomFields();
   },
   computed: {
-    fields() {
-      return CUSTOM_FIELD_LIST;
-    },
     fieldFilters() {
       return CUSTOM_FIELD_TYPE_OPTION;
     },
diff --git a/frontend/src/business/components/settings/workspace/template/IssuesTemplateList.vue b/frontend/src/business/components/settings/workspace/template/IssuesTemplateList.vue
index fc0b7161c7..25c7304f05 100644
--- a/frontend/src/business/components/settings/workspace/template/IssuesTemplateList.vue
+++ b/frontend/src/business/components/settings/workspace/template/IssuesTemplateList.vue
@@ -15,6 +15,7 @@
       :page-size.sync="pageSize"
       :operators="operators"
       :screen-height="tableHeight"
+      :enable-selection="false"
       @handlePageChange="initTableData"
       @refresh="initTableData">
 
diff --git a/frontend/src/business/components/settings/workspace/template/TestCaseTemplateList.vue b/frontend/src/business/components/settings/workspace/template/TestCaseTemplateList.vue
index 3e9d750d1d..cc761e6b84 100644
--- a/frontend/src/business/components/settings/workspace/template/TestCaseTemplateList.vue
+++ b/frontend/src/business/components/settings/workspace/template/TestCaseTemplateList.vue
@@ -14,6 +14,7 @@
       :page-size.sync="pageSize"
       :operators="operators"
       :screen-height="tableHeight"
+      :enable-selection="false"
       @handlePageChange="initTableData"
       @refresh="initTableData">
 
diff --git a/frontend/src/common/css/main.css b/frontend/src/common/css/main.css
index e56bac6b8f..2d36590dd8 100644
--- a/frontend/src/common/css/main.css
+++ b/frontend/src/common/css/main.css
@@ -212,7 +212,7 @@ textarea {
   overflow: visible;
 }
 
-.ms-select-all-fixed th:nth-child(2) .el-icon-arrow-down {
+.ms-select-all-fixed th:nth-child(2) .table-select-icon {
   position: absolute;
   display: inline-block;
   top: -9px;
diff --git a/frontend/src/common/js/default-table-header.js b/frontend/src/common/js/default-table-header.js
index 315d1fe902..17e8133289 100644
--- a/frontend/src/common/js/default-table-header.js
+++ b/frontend/src/common/js/default-table-header.js
@@ -1,3 +1,5 @@
+import i18n from "@/i18n/i18n";
+
 export const TEST_CASE_LIST = 'test_case_list';
 
 export const CUSTOM_FIELD_LIST = new Set([
@@ -25,3 +27,57 @@ export const ISSUE_TEMPLATE_LIST = new Set([
   'createTime',
   'updateTime'
 ]);
+
+export const CUSTOM_TABLE_HEADER = {
+
+  CUSTOM_FIELD: [
+    {id: 'name', key: '1', label: i18n.t('commons.name')},
+    {id: 'scene', key: '2', label: i18n.t('custom_field.scene')},
+    {id: 'type', key: '3', label: i18n.t('custom_field.attribute_type')},
+    {id: 'remark', key: '4', label: i18n.t('commons.remark')},
+    {id: 'system', key: '5', label: i18n.t('custom_field.system_field')},
+    {id: 'createTime', key: '6', label: i18n.t('commons.create_time')},
+    {id: 'updateTime', key: '7', label: i18n.t('commons.update_time')},
+  ],
+
+  API_DEFINITION: [
+    {id: 'num', key: '1', label: "ID"},
+    {id: 'name', key: '2', label: i18n.t('api_test.definition.api_name')},
+    {id: 'method', key: '3', label: i18n.t('api_test.definition.api_type')},
+    {id: 'userName', key: '4', label: i18n.t('api_test.definition.api_principal')},
+    {id: 'path', key: '5', label: i18n.t('api_test.definition.api_path')},
+    {id: 'tags', key: '6', label: i18n.t('commons.tag')},
+    {id: 'updateTime', key: '7', label: i18n.t('api_test.definition.api_last_time')},
+    {id: 'caseTotal', key: '8', label: i18n.t('api_test.definition.api_case_number')},
+    {id: 'caseStatus', key: '9', label: i18n.t('api_test.definition.api_case_status')},
+    {id: 'casePassingRate', key: 'a', label: i18n.t('api_test.definition.api_case_passing_rate')},
+    {id: 'status', key: 'b', label: i18n.t('api_test.definition.api_status')}
+  ],
+
+  API_CASE: [
+    {id: 'num', key: '1', label: "ID"},
+    {id: 'name', key: '2', label: i18n.t('test_track.case.name')},
+    {id: 'priority', key: '3', label: i18n.t('test_track.case.priority')},
+    {id: 'path', key: '4', label: 'API'+i18n.t('api_test.definition.api_path')},
+    {id: 'casePath', key: '5', label: i18n.t('api_test.definition.request.case')+i18n.t('api_test.definition.api_path')},
+    {id: 'tags', key: '6', label: i18n.t('commons.tag')},
+    {id: 'createUser', key: '7', label: "创建人"},
+    {id: 'updateTime', key: '8', label: i18n.t('api_test.definition.api_last_time')},
+  ],
+
+  API_SCENARIO: [
+    {id: 'num', key: '1', label: "ID"},
+    {id: 'name',key: '2',  label: i18n.t('api_report.scenario_name')},
+    {id: 'level', key: '3', label: i18n.t('api_test.automation.case_level')},
+    {id: 'status', key: '4', label: i18n.t('test_track.plan.plan_status')},
+    {id: 'tags', key: '5', label: i18n.t('commons.tag')},
+    {id: 'userId', key: '6', label: i18n.t('api_test.automation.creator')},
+    {id: 'principal', key: '7', label: i18n.t('api_test.definition.api_principal')},
+    {id: 'updateTime', key: '8', label: i18n.t('api_test.definition.api_last_time')},
+    {id: 'stepTotal', key: '9', label: i18n.t('api_test.automation.step')},
+    {id: 'lastResult', key: 'a', label: i18n.t('api_test.automation.last_result')},
+    {id: 'passRate', key: 'b', label: i18n.t('api_test.automation.passing_rate')},
+  ]
+
+}
+
diff --git a/frontend/src/common/js/tableUtils.js b/frontend/src/common/js/tableUtils.js
index 83d727bd0f..318e8549eb 100644
--- a/frontend/src/common/js/tableUtils.js
+++ b/frontend/src/common/js/tableUtils.js
@@ -1,4 +1,5 @@
 import {getCurrentProjectID, getCurrentUser, humpToLine} from "@/common/js/utils";
+import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header";
 
 export function _handleSelectAll(component, selection, tableData, selectRows, condition) {
   if (selection.length > 0) {
@@ -19,6 +20,9 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
     tableData.forEach(item => {
       component.$set(item, "showMore", false);
     });
+    if (condition) {
+      condition.selectAll = false;
+    }
   }
   if (selectRows.size < 1 && condition) {
     condition.selectAll = false;
@@ -217,3 +221,71 @@ export function getPageDate(response, page) {
   page.total = data.itemCount;
   page.data = data.listObject;
 }
+
+/**
+ * 获取自定义表头
+ * 如果 localStorage 没有，获取默认表头
+ * @param key
+ * @returns {[]|*}
+ */
+export function getCustomTableHeader(key) {
+  let fieldSetting = CUSTOM_TABLE_HEADER[key];
+  let fieldStr = localStorage.getItem(key);
+  if (fieldStr !== null) {
+    let fields = [];
+    for (let i = 0; i < fieldStr.length; i++) {
+      let fieldKey = fieldStr[i];
+      for (const index in fieldSetting) {
+        let item = fieldSetting[index];
+        if (item.key === fieldKey) {
+          fields.push(item);
+          break;
+        }
+      }
+    }
+    return fields;
+  }
+  return fieldSetting;
+}
+
+/**
+ * 将自定义表头存在 localStorage
+ * 格式简化，减小占用
+ * @param key
+ * @param fields
+ */
+export function saveCustomTableHeader(key, fields) {
+  let result = '';
+  if (fields) {
+    fields.forEach(item => {
+      result += item.key;
+    });
+  }
+  localStorage.setItem(key, result);
+}
+
+/**
+ * 获取对应表格的列宽
+ * @param key
+ * @returns {{}|any}
+ */
+export function getCustomTableWidth(key) {
+  let fieldStr = localStorage.getItem(key + '_WITH');
+  if (fieldStr !== null) {
+    let fields = JSON.parse(fieldStr);
+    return fields;
+  }
+  return {};
+}
+
+/**
+ * 存储表格的列宽
+ * @param key
+ * @param fieldKey
+ * @param colWith
+ */
+export function saveCustomTableWidth(key, fieldKey, colWith) {
+  let fields = getCustomTableWidth(key);
+  fields[fieldKey] = colWith + '';
+  localStorage.setItem(key + '_WITH', JSON.stringify(fields));
+}