diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index efbc66655d..f30bf7315c 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -446,7 +446,9 @@ export default {
           }
 
           this.$nextTick(function () {
-            this.$refs.scenarioTable.doLayout();
+            if (this.$refs.scenarioTable) {
+              this.$refs.scenarioTable.doLayout();
+            }
             this.checkTableRowIsSelect();
           })
         });
@@ -726,8 +728,8 @@ export default {
             // let ids = [row.id];
             let param = {};
             this.buildBatchParam(param);
-            if(param.ids && param.ids.length <=0){
-              param.ids =[row.id];
+            if (param.ids && param.ids.length <= 0) {
+              param.ids = [row.id];
             }
             this.$post('/api/automation/removeToGcByBatch/', param, () => {
               // this.$post('/api/automation/removeToGc/', ids, () => {
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 f71771bd1a..7b4c2e1894 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -313,7 +313,7 @@ export default {
         this.condition.status = "Trash";
         this.condition.moduleIds = [];
       }
-      if(!this.selectAll){
+      if (!this.selectAll) {
         this.selectAll = false;
         this.unSelection = [];
         this.selectDataCounts = 0;
@@ -342,7 +342,7 @@ export default {
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
 
-          if(!this.selectAll){
+          if (!this.selectAll) {
             this.unSelection = response.data.listObject.map(s => s.id);
           }
 
@@ -352,8 +352,10 @@ export default {
             }
           })
 
-          this.$nextTick(function(){
-            this.$refs.caseTable.doLayout();
+          this.$nextTick(function () {
+            if (this.$refs.caseTable) {
+              this.$refs.caseTable.doLayout();
+            }
             this.checkTableRowIsSelect();
           })
         });
@@ -361,20 +363,20 @@ export default {
       getLabel(this, API_CASE_LIST);
 
     },
-    checkTableRowIsSelect(){
+    checkTableRowIsSelect() {
       //如果默认全选的话，则选中应该选中的行
-      if(this.selectAll){
+      if (this.selectAll) {
         let unSelectIds = this.unSelection;
-        this.tableData.forEach(row=>{
-          if(unSelectIds.indexOf(row.id)<0){
-            this.$refs.caseTable.toggleRowSelection(row,true);
+        this.tableData.forEach(row => {
+          if (unSelectIds.indexOf(row.id) < 0) {
+            this.$refs.caseTable.toggleRowSelection(row, true);
 
             //默认全选，需要把选中对行添加到selectRows中。不然会影响到勾选函数统计
             if (!this.selectRows.has(row)) {
               this.$set(row, "showMore", true);
               this.selectRows.add(row);
             }
-          }else{
+          } else {
             //不勾选的行，也要判断是否被加入了selectRow中。加入了的话就去除。
             if (this.selectRows.has(row)) {
               this.$set(row, "showMore", false);
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 3a03be7ba8..71c3e4b7b2 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -116,7 +116,8 @@
             min-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"/>
+              <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>
           </el-table-column>
 
@@ -211,101 +212,315 @@
 
 <script>
 
-  import MsTableHeader from '../../../../common/components/MsTableHeader';
-  import MsTableOperator from "../../../../common/components/MsTableOperator";
-  import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
-  import MsTableButton from "../../../../common/components/MsTableButton";
-  import MsTablePagination from "../../../../common/pagination/TablePagination";
-  import MsTag from "../../../../common/components/MsTag";
-  import MsApiCaseList from "../case/ApiCaseList";
-  import MsContainer from "../../../../common/components/MsContainer";
-  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 {checkoutTestManagerOrTestUser, downloadFile, getUUID} from "@/common/js/utils";
-  import {PROJECT_NAME} from '@/common/js/constants';
-  import {API_LIST, TEST_CASE_LIST, WORKSPACE_ID} from '@/common/js/constants';
-  import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
-  import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
-  import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
-  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 {
-    _handleSelect,
-    _handleSelectAll, buildBatchParam, getLabel,
-    getSelectDataCounts, initCondition,
-    setUnSelectIds, toggleAllSelection
-  } from "@/common/js/tableUtils";
-  import {_filter, _sort} from "@/common/js/tableUtils";
-  import {Api_List} from "@/business/components/common/model/JsonData";
-  import HeaderCustom from "@/business/components/common/head/HeaderCustom";
-  import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
-  import {Body} from "@/business/components/api/definition/model/ApiTestModel";
+import MsTableHeader from '../../../../common/components/MsTableHeader';
+import MsTableOperator from "../../../../common/components/MsTableOperator";
+import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
+import MsTableButton from "../../../../common/components/MsTableButton";
+import MsTablePagination from "../../../../common/pagination/TablePagination";
+import MsTag from "../../../../common/components/MsTag";
+import MsApiCaseList from "../case/ApiCaseList";
+import MsContainer from "../../../../common/components/MsContainer";
+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} from "@/common/js/utils";
+import {API_LIST, PROJECT_NAME, WORKSPACE_ID} from '@/common/js/constants';
+import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
+import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
+import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
+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,
+  _handleSelect,
+  _handleSelectAll,
+  _sort,
+  buildBatchParam,
+  getLabel,
+  getSelectDataCounts,
+  initCondition,
+  setUnSelectIds,
+  toggleAllSelection
+} from "@/common/js/tableUtils";
+import {Api_List} from "@/business/components/common/model/JsonData";
+import HeaderCustom from "@/business/components/common/head/HeaderCustom";
+import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
+import {Body} from "@/business/components/api/definition/model/ApiTestModel";
 
 
-  export default {
-    name: "ApiList",
-    components: {
-      HeaderLabelOperate,
-      HeaderCustom,
-      CaseBatchMove,
-      ApiStatus,
-      MsTableHeaderSelectPopover,
-      MsTableButton,
-      MsTableOperatorButton,
-      MsTableOperator,
-      MsTableHeader,
-      MsTablePagination,
-      MsTag,
-      MsApiCaseList,
-      MsContainer,
-      MsBottomContainer,
-      ShowMoreBtn,
-      MsBatchEdit,
-      MsTipButton,
-      MsTableAdvSearchBar
-    },
-    data() {
-      return {
-        type: API_LIST,
-        headerItems: Api_List,
-        tableLabel: [],
-        condition: {
-          components: API_DEFINITION_CONFIGS
+export default {
+  name: "ApiList",
+  components: {
+    HeaderLabelOperate,
+    HeaderCustom,
+    CaseBatchMove,
+    ApiStatus,
+    MsTableHeaderSelectPopover,
+    MsTableButton,
+    MsTableOperatorButton,
+    MsTableOperator,
+    MsTableHeader,
+    MsTablePagination,
+    MsTag,
+    MsApiCaseList,
+    MsContainer,
+    MsBottomContainer,
+    ShowMoreBtn,
+    MsBatchEdit,
+    MsTipButton,
+    MsTableAdvSearchBar
+  },
+  data() {
+    return {
+      type: API_LIST,
+      headerItems: Api_List,
+      tableLabel: [],
+      condition: {
+        components: API_DEFINITION_CONFIGS
+      },
+      selectApi: {},
+      result: {},
+      moduleId: "",
+      selectDataRange: "all",
+      deletePath: "/test/case/delete",
+      selectRows: new Set(),
+      buttons: [
+        {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
+        {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch},
+        {
+          name: this.$t('api_test.definition.request.batch_move'), handleClick: this.handleBatchMove
+        }
+      ],
+      trashButtons: [
+        {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
+        {
+          name: "批量恢复", handleClick: this.handleBatchRestore
         },
-        selectApi: {},
-        result: {},
-        moduleId: "",
-        selectDataRange: "all",
-        deletePath: "/test/case/delete",
-        selectRows: new Set(),
-        buttons: [
-          {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
-          {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch},
-          {
-            name: this.$t('api_test.definition.request.batch_move'), handleClick: this.handleBatchMove
+      ],
+      typeArr: [
+        {id: 'status', name: this.$t('api_test.definition.api_status')},
+        {id: 'method', name: this.$t('api_test.definition.api_type')},
+        {id: 'userId', name: this.$t('api_test.definition.api_principal')},
+      ],
+      statusFilters: [
+        {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
+        {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
+        {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
+        {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
+      ],
+      methodFilters: [
+        {text: 'GET', value: 'GET'},
+        {text: 'POST', value: 'POST'},
+        {text: 'PUT', value: 'PUT'},
+        {text: 'PATCH', value: 'PATCH'},
+        {text: 'DELETE', value: 'DELETE'},
+        {text: 'OPTIONS', value: 'OPTIONS'},
+        {text: 'HEAD', value: 'HEAD'},
+        {text: 'CONNECT', value: 'CONNECT'},
+        {text: 'DUBBO', value: 'DUBBO'},
+        {text: 'dubbo://', value: 'dubbo://'},
+        {text: 'SQL', value: 'SQL'},
+        {text: 'TCP', value: 'TCP'},
+      ],
+      userFilters: [],
+      valueArr: {
+        status: API_STATUS,
+        method: REQ_METHOD,
+        userId: [],
+      },
+      methodColorMap: new Map(API_METHOD_COLOUR),
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      screenHeight: document.documentElement.clientHeight - 310,//屏幕高度,
+      environmentId: undefined,
+      selectDataCounts: 0,
+    }
+  },
+  props: {
+    currentProtocol: String,
+    selectNodeIds: Array,
+    isSelectThisWeek: String,
+    activeDom: String,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    isCaseRelevance: {
+      type: Boolean,
+      default: false,
+    },
+    trashEnable: {
+      type: Boolean,
+      default: false,
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    moduleTree: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    moduleOptions: {
+      type: Array,
+      default() {
+        return []
+      },
+    }
+  },
+  computed: {
+    projectId() {
+      return this.$store.state.projectId
+    },
+  },
+  created: function () {
+    if (this.trashEnable) {
+      this.condition.filters = {status: ["Trash"]};
+    } else {
+      this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
+    }
+    this.initTable();
+    this.getMaintainerOptions();
+  },
+  watch: {
+    selectNodeIds() {
+      initCondition(this.condition, false);
+      this.initTable();
+    },
+    currentProtocol() {
+      initCondition(this.condition, false);
+      this.initTable();
+    },
+    trashEnable() {
+      if (this.trashEnable) {
+        this.condition.filters = {status: ["Trash"]};
+        this.condition.moduleIds = [];
+      } else {
+        this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
+      }
+      initCondition(this.condition, false);
+      this.initTable();
+    }
+  },
+  methods: {
+    customHeader() {
+      this.$refs.headerCustom.open(this.tableLabel)
+    },
+    handleBatchMove() {
+      this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
+    },
+    initTable() {
+      this.selectRows = new Set();
+      initCondition(this.condition, this.condition.selectAll);
+      this.selectDataCounts = 0;
+      this.condition.moduleIds = this.selectNodeIds;
+      this.condition.projectId = this.projectId;
+      if (this.currentProtocol != null) {
+        this.condition.protocol = this.currentProtocol;
+      }
+
+      //检查是否只查询本周数据
+      this.getSelectDataRange();
+      this.condition.selectThisWeedData = false;
+      this.condition.apiCaseCoverage = null;
+      switch (this.selectDataRange) {
+        case 'thisWeekCount':
+          this.condition.selectThisWeedData = true;
+          break;
+        case 'uncoverage':
+          this.condition.apiCaseCoverage = 'uncoverage';
+          break;
+        case 'coverage':
+          this.condition.apiCaseCoverage = 'coverage';
+          break;
+        case 'Prepare':
+          this.condition.filters.status = [this.selectDataRange];
+          break;
+        case 'Completed':
+          this.condition.filters.status = [this.selectDataRange];
+          break;
+        case 'Underway':
+          this.condition.filters.status = [this.selectDataRange];
+          break;
+      }
+      if (this.condition.projectId) {
+        this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
+          this.genProtocalFilter(this.condition.protocol);
+          this.total = response.data.itemCount;
+          this.tableData = response.data.listObject;
+          this.tableData.forEach(item => {
+            if (item.tags && item.tags.length > 0) {
+              item.tags = JSON.parse(item.tags);
+            }
+          })
+
+          // nexttick:表格加载完成之后触发。判断是否需要勾选行
+          this.$nextTick(function () {
+            if (this.$refs.apiDefinitionTable) {
+              this.$refs.apiDefinitionTable.doLayout();
+            }
+            this.checkTableRowIsSelect();
+          })
+        });
+      }
+      getLabel(this, API_LIST);
+    },
+    checkTableRowIsSelect() {
+      //如果默认全选的话，则选中应该选中的行
+      if (this.condition.selectAll) {
+        let unSelectIds = this.condition.unSelectIds;
+        this.tableData.forEach(row => {
+          if (unSelectIds.indexOf(row.id) < 0) {
+            this.$refs.apiDefinitionTable.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);
+            }
           }
-        ],
-        trashButtons: [
-          {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
-          {
-            name: "批量恢复", handleClick: this.handleBatchRestore
-          },
-        ],
-        typeArr: [
-          {id: 'status', name: this.$t('api_test.definition.api_status')},
-          {id: 'method', name: this.$t('api_test.definition.api_type')},
-          {id: 'userId', name: this.$t('api_test.definition.api_principal')},
-        ],
-        statusFilters: [
-          {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
-          {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
-          {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
-          {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
-        ],
-        methodFilters: [
+        })
+      }
+    },
+    genProtocalFilter(protocalType) {
+      if (protocalType === "HTTP") {
+        this.methodFilters = [
+          {text: 'GET', value: 'GET'},
+          {text: 'POST', value: 'POST'},
+          {text: 'PUT', value: 'PUT'},
+          {text: 'PATCH', value: 'PATCH'},
+          {text: 'DELETE', value: 'DELETE'},
+          {text: 'OPTIONS', value: 'OPTIONS'},
+          {text: 'HEAD', value: 'HEAD'},
+          {text: 'CONNECT', value: 'CONNECT'},
+        ];
+      } else if (protocalType === "TCP") {
+        this.methodFilters = [
+          {text: 'TCP', value: 'TCP'},
+        ];
+      } else if (protocalType === "SQL") {
+        this.methodFilters = [
+          {text: 'SQL', value: 'SQL'},
+        ];
+      } else if (protocalType === "DUBBO") {
+        this.methodFilters = [
+          {text: 'DUBBO', value: 'DUBBO'},
+          {text: 'dubbo://', value: 'dubbo://'},
+        ];
+      } else {
+        this.methodFilters = [
           {text: 'GET', value: 'GET'},
           {text: 'POST', value: 'POST'},
           {text: 'PUT', value: 'PUT'},
@@ -318,520 +533,311 @@
           {text: 'dubbo://', value: 'dubbo://'},
           {text: 'SQL', value: 'SQL'},
           {text: 'TCP', value: 'TCP'},
-        ],
-        userFilters: [],
-        valueArr: {
-          status: API_STATUS,
-          method: REQ_METHOD,
-          userId: [],
-        },
-        methodColorMap: new Map(API_METHOD_COLOUR),
-        tableData: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        screenHeight: document.documentElement.clientHeight - 310,//屏幕高度,
-        environmentId: undefined,
-        selectDataCounts: 0,
+        ];
       }
     },
-    props: {
-      currentProtocol: String,
-      selectNodeIds: Array,
-      isSelectThisWeek: String,
-      activeDom: String,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      isCaseRelevance: {
-        type: Boolean,
-        default: false,
-      },
-      trashEnable: {
-        type: Boolean,
-        default: false,
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      moduleTree: {
-        type: Array,
-        default() {
-          return []
-        },
-      },
-      moduleOptions: {
-        type: Array,
-        default() {
-          return []
-        },
-      }
+    getMaintainerOptions() {
+      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+        this.valueArr.userId = response.data;
+        this.userFilters = response.data.map(u => {
+          return {text: u.name, value: u.id}
+        });
+      });
     },
-    computed: {
-      projectId() {
-        return this.$store.state.projectId
-      },
+    handleSelectAll(selection) {
+      _handleSelectAll(this, selection, this.tableData, this.selectRows);
+      setUnSelectIds(this.tableData, this.condition, this.selectRows);
+      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
     },
-    created: function () {
-      if (this.trashEnable) {
-        this.condition.filters = {status: ["Trash"]};
-      } else {
-        this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
-      }
+    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);
+    },
+    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.apiDefinitionTable, this.tableData, this.selectRows);
+    },
+    search() {
+      this.changeSelectDataRangeAll();
       this.initTable();
-      this.getMaintainerOptions();
     },
-    watch: {
-      selectNodeIds() {
-        initCondition(this.condition,false);
-        this.initTable();
-      },
-      currentProtocol() {
-        initCondition(this.condition,false);
-        this.initTable();
-      },
-      trashEnable() {
-        if (this.trashEnable) {
-          this.condition.filters = {status: ["Trash"]};
-          this.condition.moduleIds = [];
-        } else {
-          this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
-        }
-        initCondition(this.condition,false);
-        this.initTable();
+    buildPagePath(path) {
+      return path + "/" + this.currentPage + "/" + this.pageSize;
+    },
+
+    editApi(row) {
+      this.$emit('editApi', row);
+    },
+    runApi(row) {
+
+      let request = row ? JSON.parse(row.request) : {};
+      if (row.tags instanceof Array) {
+        row.tags = JSON.stringify(row.tags);
       }
+      let response = ""
+      if (row.response != null && row.response != 'null' && row.response != undefined) {
+        if (Object.prototype.toString.call(row.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          response = row.response;
+        } else {
+          response = JSON.parse(row.response);
+        }
+      } else {
+        response = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
+      }
+      if (response.body) {
+        let body = new Body();
+        Object.assign(body, response.body);
+        if (!body.binary) {
+          body.binary = [];
+        }
+        if (!body.kvs) {
+          body.kvs = [];
+        }
+        if (!body.binary) {
+          body.binary = [];
+        }
+        response.body = body;
+      }
+      row.request = request
+      row.response = response
+      this.$emit('runTest', row);
     },
-    methods: {
-      customHeader() {
-        this.$refs.headerCustom.open(this.tableLabel)
-      },
-      handleBatchMove() {
-        this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
-      },
-      initTable() {
-        this.selectRows = new Set();
-        initCondition(this.condition,this.condition.selectAll);
-        this.selectDataCounts = 0;
-        this.condition.moduleIds = this.selectNodeIds;
-        this.condition.projectId = this.projectId;
-        if (this.currentProtocol != null) {
-          this.condition.protocol = this.currentProtocol;
-        }
-
-        //检查是否只查询本周数据
-        this.getSelectDataRange();
-        this.condition.selectThisWeedData = false;
-        this.condition.apiCaseCoverage = null;
-        switch (this.selectDataRange) {
-          case 'thisWeekCount':
-            this.condition.selectThisWeedData = true;
-            break;
-          case 'uncoverage':
-            this.condition.apiCaseCoverage = 'uncoverage';
-            break;
-          case 'coverage':
-            this.condition.apiCaseCoverage = 'coverage';
-            break;
-          case 'Prepare':
-            this.condition.filters.status = [this.selectDataRange];
-            break;
-          case 'Completed':
-            this.condition.filters.status = [this.selectDataRange];
-            break;
-          case 'Underway':
-            this.condition.filters.status = [this.selectDataRange];
-            break;
-        }
-        if (this.condition.projectId) {
-          this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
-            this.genProtocalFilter(this.condition.protocol);
-            this.total = response.data.itemCount;
-            this.tableData = response.data.listObject;
-            this.tableData.forEach(item => {
-              if (item.tags && item.tags.length > 0) {
-                item.tags = JSON.parse(item.tags);
-              }
-            })
-
-            // nexttick:表格加载完成之后触发。判断是否需要勾选行
-            this.$nextTick(function(){
-              this.$refs.apiDefinitionTable.doLayout();
-              this.checkTableRowIsSelect();
-            })
-          });
-        }
-        getLabel(this, API_LIST);
-      },
-      checkTableRowIsSelect(){
-        //如果默认全选的话，则选中应该选中的行
-        if(this.condition.selectAll){
-          let unSelectIds = this.condition.unSelectIds;
-          this.tableData.forEach(row=>{
-            if(unSelectIds.indexOf(row.id)<0){
-              this.$refs.apiDefinitionTable.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);
-              }
-            }
-          })
-        }
-      },
-      genProtocalFilter(protocalType) {
-        if (protocalType === "HTTP") {
-          this.methodFilters = [
-            {text: 'GET', value: 'GET'},
-            {text: 'POST', value: 'POST'},
-            {text: 'PUT', value: 'PUT'},
-            {text: 'PATCH', value: 'PATCH'},
-            {text: 'DELETE', value: 'DELETE'},
-            {text: 'OPTIONS', value: 'OPTIONS'},
-            {text: 'HEAD', value: 'HEAD'},
-            {text: 'CONNECT', value: 'CONNECT'},
-          ];
-        } else if (protocalType === "TCP") {
-          this.methodFilters = [
-            {text: 'TCP', value: 'TCP'},
-          ];
-        } else if (protocalType === "SQL") {
-          this.methodFilters = [
-            {text: 'SQL', value: 'SQL'},
-          ];
-        } else if (protocalType === "DUBBO") {
-          this.methodFilters = [
-            {text: 'DUBBO', value: 'DUBBO'},
-            {text: 'dubbo://', value: 'dubbo://'},
-          ];
-        } else {
-          this.methodFilters = [
-            {text: 'GET', value: 'GET'},
-            {text: 'POST', value: 'POST'},
-            {text: 'PUT', value: 'PUT'},
-            {text: 'PATCH', value: 'PATCH'},
-            {text: 'DELETE', value: 'DELETE'},
-            {text: 'OPTIONS', value: 'OPTIONS'},
-            {text: 'HEAD', value: 'HEAD'},
-            {text: 'CONNECT', value: 'CONNECT'},
-            {text: 'DUBBO', value: 'DUBBO'},
-            {text: 'dubbo://', value: 'dubbo://'},
-            {text: 'SQL', value: 'SQL'},
-            {text: 'TCP', value: 'TCP'},
-          ];
-        }
-      },
-      getMaintainerOptions() {
-        let workspaceId = localStorage.getItem(WORKSPACE_ID);
-        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-          this.valueArr.userId = response.data;
-          this.userFilters = response.data.map(u => {
-            return {text: u.name, value: u.id}
-          });
-        });
-      },
-      handleSelectAll(selection) {
-        _handleSelectAll(this, selection, this.tableData, this.selectRows);
-        setUnSelectIds(this.tableData, this.condition, this.selectRows);
-        this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-      },
-      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);
-      },
-      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.apiDefinitionTable, this.tableData, this.selectRows);
-      },
-      search() {
-        this.changeSelectDataRangeAll();
-        this.initTable();
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-
-      editApi(row) {
-        this.$emit('editApi', row);
-      },
-      runApi(row) {
-
-        let request = row ? JSON.parse(row.request) : {};
-        if (row.tags instanceof Array) {
-          row.tags = JSON.stringify(row.tags);
-        }
-        let response = ""
-        if (row.response != null && row.response != 'null' && row.response != undefined) {
-          if (Object.prototype.toString.call(row.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
-            response = row.response;
-          } else {
-            response = JSON.parse(row.response);
-          }
-        } else {
-          response = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
-        }
-        if (response.body) {
-          let body = new Body();
-          Object.assign(body, response.body);
-          if (!body.binary) {
-            body.binary = [];
-          }
-          if (!body.kvs) {
-            body.kvs = [];
-          }
-          if (!body.binary) {
-            body.binary = [];
-          }
-          response.body = body;
-        }
-        row.request = request
-        row.response = response
-        this.$emit('runTest', row);
-      },
-      reductionApi(row) {
-        let tmp = JSON.parse(JSON.stringify(row));
-        let rows = {ids: [tmp.id]};
-        this.$post('/api/definition/reduction/', rows, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.search();
-        });
-      },
-      handleBatchRestore() {
-        this.$post('/api/definition/reduction/', buildBatchParam(this), () => {
-          this.$success(this.$t('commons.save_success'));
-          this.search();
-        });
-      },
-      handleDeleteBatch() {
-        if (this.trashEnable) {
-          this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                this.$post('/api/definition/deleteBatchByParams/', buildBatchParam(this), () => {
-                  this.selectRows.clear();
-                  this.initTable();
-                  this.$success(this.$t('commons.delete_success'));
-                });
-              }
-            }
-          });
-        } else {
-          this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                this.$post('/api/definition/removeToGcByParams/', buildBatchParam(this), () => {
-                  this.selectRows.clear();
-                  this.initTable();
-                  this.$success(this.$t('commons.delete_success'));
-                  this.$refs.caseList.apiCaseClose();
-                });
-              }
-            }
-          });
-        }
-      },
-      handleEditBatch() {
-        if (this.currentProtocol == 'HTTP') {
-          this.valueArr.method = REQ_METHOD;
-        } else if (this.currentProtocol == 'TCP') {
-          this.valueArr.method = TCP_METHOD;
-        } else if (this.currentProtocol == 'SQL') {
-          this.valueArr.method = SQL_METHOD;
-        } else if (this.currentProtocol == 'DUBBO') {
-          this.valueArr.method = DUBBO_METHOD;
-        }
-        this.$refs.batchEdit.open();
-      },
-      batchEdit(form) {
-        let param = buildBatchParam(this);
-        param[form.type] = form.value;
-        this.$post('/api/definition/batch/editByParams', param, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.initTable();
-        });
-      },
-      moveSave(param) {
-        let arr = Array.from(this.selectRows);
-        let ids = arr.map(row => row.id);
-        param.ids = ids;
-        param.projectId = this.projectId;
-        param.moduleId = param.nodeId;
-        param.condition = this.condition;
-        param.selectAllDate = this.isSelectAllDate;
-        param.unSelectIds = this.unSelection;
-        param = Object.assign(param, this.condition);
-        param.moduleId = param.nodeId;
-        this.$post('/api/definition/batch/editByParams', param, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.$refs.testCaseBatchMove.close();
-          this.initTable();
-        });
-      },
-      handleTestCase(api) {
-        this.selectApi = api;
-        let request = {};
-        if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
-          request = api.request;
-        } else {
-          request = JSON.parse(api.request);
-        }
-        if (!request.hashTree) {
-          request.hashTree = [];
-        }
-        this.selectApi.url = request.path;
-        this.$refs.caseList.open(this.selectApi);
-      },
-      handleDelete(api) {
-        if (this.trashEnable) {
-          this.$get('/api/definition/delete/' + api.id, () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.initTable();
-          });
-          return;
-        }
-        this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
+    reductionApi(row) {
+      let tmp = JSON.parse(JSON.stringify(row));
+      let rows = {ids: [tmp.id]};
+      this.$post('/api/definition/reduction/', rows, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.search();
+      });
+    },
+    handleBatchRestore() {
+      this.$post('/api/definition/reduction/', buildBatchParam(this), () => {
+        this.$success(this.$t('commons.save_success'));
+        this.search();
+      });
+    },
+    handleDeleteBatch() {
+      if (this.trashEnable) {
+        this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
           confirmButtonText: this.$t('commons.confirm'),
           callback: (action) => {
             if (action === 'confirm') {
-              let ids = [api.id];
-              this.$post('/api/definition/removeToGc/', ids, () => {
-                this.$success(this.$t('commons.delete_success'));
+              this.$post('/api/definition/deleteBatchByParams/', buildBatchParam(this), () => {
+                this.selectRows.clear();
                 this.initTable();
+                this.$success(this.$t('commons.delete_success'));
+              });
+            }
+          }
+        });
+      } else {
+        this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              this.$post('/api/definition/removeToGcByParams/', buildBatchParam(this), () => {
+                this.selectRows.clear();
+                this.initTable();
+                this.$success(this.$t('commons.delete_success'));
                 this.$refs.caseList.apiCaseClose();
               });
             }
           }
         });
-      },
-      getColor(enable, method) {
-        if (enable) {
-          return this.methodColorMap.get(method);
-        }
-      },
-      showExecResult(row) {
-        this.$emit('showExecResult', row);
-      },
-      //判断是否只显示本周的数据。  从首页跳转过来的请求会带有相关参数
-      getSelectDataRange() {
-        let dataRange = this.$route.params.dataSelectRange;
-        let dataType = this.$route.params.dataType;
-        if (dataType === 'api') {
-          this.selectDataRange = dataRange;
-        } else {
-          this.selectDataRange = 'all';
-        }
-      },
-      changeSelectDataRangeAll() {
-        this.$emit("changeSelectDataRangeAll", "api");
-      },
-      getIds(rowSets) {
-        let rowArray = Array.from(rowSets)
-        let ids = rowArray.map(s => s.id);
-        return ids;
-      },
-      exportApi(type) {
-        let param = buildBatchParam(this);
-        param.protocol = this.currentProtocol;
-        if (param.ids === undefined || param.ids.length < 1) {
-          this.$warning(this.$t("api_test.definition.check_select"));
-          return;
-        }
-        this.result = this.$post("/api/definition/export/" + type, param, response => {
-          let obj = response.data;
-          if (type == 'MS') {
-            obj.protocol = this.currentProtocol;
-            this.buildApiPath(obj.data);
-            downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
-          }
-          else {
-            downloadFile("Swagger_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
-          }
-        });
-      },
-      buildApiPath(apis) {
-        apis.forEach((api) => {
-          this.moduleOptions.forEach(item => {
-            if (api.moduleId === item.id) {
-              api.modulePath = item.path;
-            }
-          });
-        });
-      },
-      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) {
-          finalWidth = column.minWidth;
-        }
-        column.width = finalWidth;
-        column.realWidth = finalWidth;
-      },
-      open() {
-        this.$refs.searchBar.open();
       }
     },
-  }
+    handleEditBatch() {
+      if (this.currentProtocol == 'HTTP') {
+        this.valueArr.method = REQ_METHOD;
+      } else if (this.currentProtocol == 'TCP') {
+        this.valueArr.method = TCP_METHOD;
+      } else if (this.currentProtocol == 'SQL') {
+        this.valueArr.method = SQL_METHOD;
+      } else if (this.currentProtocol == 'DUBBO') {
+        this.valueArr.method = DUBBO_METHOD;
+      }
+      this.$refs.batchEdit.open();
+    },
+    batchEdit(form) {
+      let param = buildBatchParam(this);
+      param[form.type] = form.value;
+      this.$post('/api/definition/batch/editByParams', param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.initTable();
+      });
+    },
+    moveSave(param) {
+      let arr = Array.from(this.selectRows);
+      let ids = arr.map(row => row.id);
+      param.ids = ids;
+      param.projectId = this.projectId;
+      param.moduleId = param.nodeId;
+      param.condition = this.condition;
+      param.selectAllDate = this.isSelectAllDate;
+      param.unSelectIds = this.unSelection;
+      param = Object.assign(param, this.condition);
+      param.moduleId = param.nodeId;
+      this.$post('/api/definition/batch/editByParams', param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.$refs.testCaseBatchMove.close();
+        this.initTable();
+      });
+    },
+    handleTestCase(api) {
+      this.selectApi = api;
+      let request = {};
+      if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+        request = api.request;
+      } else {
+        request = JSON.parse(api.request);
+      }
+      if (!request.hashTree) {
+        request.hashTree = [];
+      }
+      this.selectApi.url = request.path;
+      this.$refs.caseList.open(this.selectApi);
+    },
+    handleDelete(api) {
+      if (this.trashEnable) {
+        this.$get('/api/definition/delete/' + api.id, () => {
+          this.$success(this.$t('commons.delete_success'));
+          this.initTable();
+        });
+        return;
+      }
+      this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            let ids = [api.id];
+            this.$post('/api/definition/removeToGc/', ids, () => {
+              this.$success(this.$t('commons.delete_success'));
+              this.initTable();
+              this.$refs.caseList.apiCaseClose();
+            });
+          }
+        }
+      });
+    },
+    getColor(enable, method) {
+      if (enable) {
+        return this.methodColorMap.get(method);
+      }
+    },
+    showExecResult(row) {
+      this.$emit('showExecResult', row);
+    },
+    //判断是否只显示本周的数据。  从首页跳转过来的请求会带有相关参数
+    getSelectDataRange() {
+      let dataRange = this.$route.params.dataSelectRange;
+      let dataType = this.$route.params.dataType;
+      if (dataType === 'api') {
+        this.selectDataRange = dataRange;
+      } else {
+        this.selectDataRange = 'all';
+      }
+    },
+    changeSelectDataRangeAll() {
+      this.$emit("changeSelectDataRangeAll", "api");
+    },
+    getIds(rowSets) {
+      let rowArray = Array.from(rowSets)
+      let ids = rowArray.map(s => s.id);
+      return ids;
+    },
+    exportApi(type) {
+      let param = buildBatchParam(this);
+      param.protocol = this.currentProtocol;
+      if (param.ids === undefined || param.ids.length < 1) {
+        this.$warning(this.$t("api_test.definition.check_select"));
+        return;
+      }
+      this.result = this.$post("/api/definition/export/" + type, param, response => {
+        let obj = response.data;
+        if (type == 'MS') {
+          obj.protocol = this.currentProtocol;
+          this.buildApiPath(obj.data);
+          downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
+        } else {
+          downloadFile("Swagger_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
+        }
+      });
+    },
+    buildApiPath(apis) {
+      apis.forEach((api) => {
+        this.moduleOptions.forEach(item => {
+          if (api.moduleId === item.id) {
+            api.modulePath = item.path;
+          }
+        });
+      });
+    },
+    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) {
+        finalWidth = column.minWidth;
+      }
+      column.width = finalWidth;
+      column.realWidth = finalWidth;
+    },
+    open() {
+      this.$refs.searchBar.open();
+    }
+  },
+}
 </script>
 
 <style scoped>
-  .operate-button > div {
-    display: inline-block;
-    margin-left: 10px;
-  }
+.operate-button > div {
+  display: inline-block;
+  margin-left: 10px;
+}
 
-  .request-method {
-    padding: 0 5px;
-    color: #1E90FF;
-  }
+.request-method {
+  padding: 0 5px;
+  color: #1E90FF;
+}
 
-  .api-el-tag {
-    color: white;
-  }
+.api-el-tag {
+  color: white;
+}
 
-  .search-input {
-    float: right;
-    width: 300px;
-    margin-right: 10px;
-  }
+.search-input {
+  float: right;
+  width: 300px;
+  margin-right: 10px;
+}
 
-  .el-tag {
-    margin-left: 10px;
-  }
+.el-tag {
+  margin-left: 10px;
+}
 
-  .ms-select-all >>> th:first-child {
-    margin-top: 20px;
-  }
+.ms-select-all >>> th:first-child {
+  margin-top: 20px;
+}
 
-  .ms-select-all >>> th:nth-child(2) .el-icon-arrow-down {
-    top: -2px;
-  }
+.ms-select-all >>> th:nth-child(2) .el-icon-arrow-down {
+  top: -2px;
+}
 
-  /deep/ .el-table__fixed-body-wrapper {
-    top: 60px !important;
-  }
+/deep/ .el-table__fixed-body-wrapper {
+  top: 60px !important;
+}
 
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 141bd7a9b7..eca9805b0d 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -2,128 +2,128 @@
 
   <div class="card-container" v-loading="result.loading">
 
-      <ms-table-header :is-tester-permission="true" :condition.sync="condition" @search="initTableData"
-                       :tip="$t('commons.search_by_name_or_id')" title="" :show-create="false"/>
-      <el-table
-          border
-          :data="tableData"
-          @sort-change="sort"
-          @filter-change="filter"
-          @select-all="handleSelectAll"
-          @select="handleSelect"
-          @header-dragend="headerDragend"
-          @cell-mouse-enter="showPopover"
-          row-key="id"
-          class="test-content adjust-table ms-select-all-fixed"
-          ref="table" @row-click="handleEdit">
+    <ms-table-header :is-tester-permission="true" :condition.sync="condition" @search="initTableData"
+                     :tip="$t('commons.search_by_name_or_id')" title="" :show-create="false"/>
+    <el-table
+      border
+      :data="tableData"
+      @sort-change="sort"
+      @filter-change="filter"
+      @select-all="handleSelectAll"
+      @select="handleSelect"
+      @header-dragend="headerDragend"
+      @cell-mouse-enter="showPopover"
+      row-key="id"
+      class="test-content adjust-table ms-select-all-fixed"
+      ref="table" @row-click="handleEdit">
+      <el-table-column
+        width="50"
+        type="selection"/>
+
+      <ms-table-header-select-popover v-show="total>0"
+                                      :page-size="pageSize > total ? total : pageSize"
+                                      :total="total"
+                                      @selectPageAll="isSelectDataAll(false)"
+                                      @selectAll="isSelectDataAll(true)"/>
+
+      <el-table-column width="40" :resizable="false" align="center">
+        <template v-slot:default="scope">
+          <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableLabel">
+
         <el-table-column
-            width="50"
-            type="selection"/>
-
-        <ms-table-header-select-popover v-show="total>0"
-                                        :page-size="pageSize > total ? total : pageSize"
-                                        :total="total"
-                                        @selectPageAll="isSelectDataAll(false)"
-                                        @selectAll="isSelectDataAll(true)"/>
-
-        <el-table-column width="40" :resizable="false" align="center">
+          v-if="item.id == 'num'"
+          prop="num"
+          sortable="custom"
+          :label="$t('commons.id')"
+          :key="index"
+          show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column
+          v-if="item.id == 'name'"
+          prop="name"
+          :label="$t('commons.name')"
+          show-overflow-tooltip
+          :key="index"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="item.id == 'priority'"
+          prop="priority"
+          :filters="priorityFilters"
+          column-key="priority"
+          min-width="100px"
+          :label="$t('test_track.case.priority')"
+          show-overflow-tooltip
+          :key="index">
           <template v-slot:default="scope">
-            <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
+            <priority-table-item :value="scope.row.priority"/>
           </template>
         </el-table-column>
-        <template v-for="(item, index) in tableLabel">
-
-          <el-table-column
-              v-if="item.id == 'num'"
-              prop="num"
-              sortable="custom"
-              :label="$t('commons.id')"
-              :key="index"
-              show-overflow-tooltip>
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'name'"
-              prop="name"
-              :label="$t('commons.name')"
-              show-overflow-tooltip
-              :key="index"
-          >
-          </el-table-column>
-          <el-table-column
-              v-if="item.id == 'priority'"
-              prop="priority"
-              :filters="priorityFilters"
-              column-key="priority"
-              min-width="100px"
-              :label="$t('test_track.case.priority')"
-              show-overflow-tooltip
-              :key="index">
-            <template v-slot:default="scope">
-              <priority-table-item :value="scope.row.priority"/>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="item.id=='reviewStatus'"
-            column-key="reviewStatus"
-            min-width="100px"
-            :label="$t('test_track.case.status')"
-            :key="index">
-            <template v-slot:default="scope">
+        <el-table-column
+          v-if="item.id=='reviewStatus'"
+          column-key="reviewStatus"
+          min-width="100px"
+          :label="$t('test_track.case.status')"
+          :key="index">
+          <template v-slot:default="scope">
             <span class="el-dropdown-link">
               <review-status :value="scope.row.reviewStatus"/>
             </span>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="item.id=='tags'" prop="tags" :label="$t('commons.tag')" :key="index">
-            <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"/>
-            </template>
-          </el-table-column>
-
-          <el-table-column
-            v-if="item.id=='nodePath'"
-            prop="nodePath"
-              :label="$t('test_track.case.module')"
-              min-width="150px"
-              show-overflow-tooltip
-              :key="index">
-          </el-table-column>
-
-          <el-table-column
-              v-if="item.id=='updateTime'"
-              prop="updateTime"
-              sortable="custom"
-              :label="$t('commons.update_time')"
-              min-width="150px"
-              show-overflow-tooltip
-              :key="index">
-            <template v-slot:default="scope">
-              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
-            </template>
-          </el-table-column>
-        </template>
-        <el-table-column fixed="right" min-width="150">
-          <template slot="header">
-            <header-label-operate @exec="customHeader"/>
-          </template>
-          <template v-slot:default="scope">
-            <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)"
-                               @deleteClick="handleDelete(scope.row)">
-              <template v-slot:middle>
-                <ms-table-operator-button :is-tester-permission="true" :tip="$t('commons.copy')"
-                                          icon="el-icon-document-copy"
-                                          type="success" @exec="handleCopy(scope.row)"/>
-              </template>
-            </ms-table-operator>
           </template>
         </el-table-column>
-        <header-custom ref="headerCustom" :initTableData="initTableData" :optionalFields=headerItems
-                       :type=type></header-custom>
-      </el-table>
+        <el-table-column v-if="item.id=='tags'" prop="tags" :label="$t('commons.tag')" :key="index">
+          <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"/>
+          </template>
+        </el-table-column>
 
-      <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                           :total="total"/>
+        <el-table-column
+          v-if="item.id=='nodePath'"
+          prop="nodePath"
+          :label="$t('test_track.case.module')"
+          min-width="150px"
+          show-overflow-tooltip
+          :key="index">
+        </el-table-column>
+
+        <el-table-column
+          v-if="item.id=='updateTime'"
+          prop="updateTime"
+          sortable="custom"
+          :label="$t('commons.update_time')"
+          min-width="150px"
+          show-overflow-tooltip
+          :key="index">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column fixed="right" min-width="150">
+        <template slot="header">
+          <header-label-operate @exec="customHeader"/>
+        </template>
+        <template v-slot:default="scope">
+          <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)"
+                             @deleteClick="handleDelete(scope.row)">
+            <template v-slot:middle>
+              <ms-table-operator-button :is-tester-permission="true" :tip="$t('commons.copy')"
+                                        icon="el-icon-document-copy"
+                                        type="success" @exec="handleCopy(scope.row)"/>
+            </template>
+          </ms-table-operator>
+        </template>
+      </el-table-column>
+      <header-custom ref="headerCustom" :initTableData="initTableData" :optionalFields=headerItems
+                     :type=type></header-custom>
+    </el-table>
+
+    <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
+                         :total="total"/>
 
     <batch-edit ref="batchEdit" @batchEdit="batchEdit"
                 :typeArr="typeArr" :value-arr="valueArr" :dialog-title="$t('test_track.case.batch_edit_case')"/>
@@ -160,15 +160,17 @@ import {
   _filter,
   _handleSelect,
   _handleSelectAll,
-  _sort, buildBatchParam, getLabel,
-  getSelectDataCounts, initCondition,
+  _sort,
+  buildBatchParam,
+  getLabel,
+  getSelectDataCounts,
+  initCondition,
   setUnSelectIds,
   toggleAllSelection
 } from "@/common/js/tableUtils";
 import BatchMove from "./BatchMove";
 import {Track_Test_Case} from "@/business/components/common/model/JsonData";
 import HeaderCustom from "@/business/components/common/head/HeaderCustom";
-import i18n from "@/i18n/i18n";
 import HeaderLabelOperate from "@/business/components/common/head/HeaderLabelOperate";
 import PlanStatusTableItem from "@/business/components/track/common/tableItems/plan/PlanStatusTableItem";
 
@@ -314,7 +316,7 @@ export default {
   watch: {
     selectNodeIds() {
       this.currentPage = 1;
-      initCondition(this.condition,false);
+      initCondition(this.condition, false);
       this.initTableData();
     },
     condition() {
@@ -334,7 +336,7 @@ export default {
       this.condition.planId = "";
       this.condition.nodeIds = [];
       //initCondition(this.condition);
-      initCondition(this.condition,this.condition.selectAll);
+      initCondition(this.condition, this.condition.selectAll);
       this.selectDataCounts = 0;
       if (this.planId) {
         // param.planId = this.planId;
@@ -393,27 +395,29 @@ export default {
             item.tags = JSON.parse(item.tags);
           })
 
-          this.$nextTick(function(){
-            this.$refs.table.doLayout();
+          this.$nextTick(() => {
+            if (this.$refs.table) {
+              this.$refs.table.doLayout();
+            }
             this.checkTableRowIsSelect();
           })
         });
       }
     },
-    checkTableRowIsSelect(){
+    checkTableRowIsSelect() {
       //如果默认全选的话，则选中应该选中的行
-      if(this.condition.selectAll){
+      if (this.condition.selectAll) {
         let unSelectIds = this.condition.unSelectIds;
-        this.tableData.forEach(row=>{
-          if(unSelectIds.indexOf(row.id)<0){
-            this.$refs.table.toggleRowSelection(row,true);
+        this.tableData.forEach(row => {
+          if (unSelectIds.indexOf(row.id) < 0) {
+            this.$refs.table.toggleRowSelection(row, true);
 
             //默认全选，需要把选中对行添加到selectRows中。不然会影响到勾选函数统计
             if (!this.selectRows.has(row)) {
               this.$set(row, "showMore", true);
               this.selectRows.add(row);
             }
-          }else{
+          } else {
             //不勾选的行，也要判断是否被加入了selectRow中。加入了的话就去除。
             if (this.selectRows.has(row)) {
               this.$set(row, "showMore", false);
@@ -441,7 +445,7 @@ export default {
     handleCopy(testCase) {
       this.$get('test/case/get/' + testCase.id, response => {
         let testCase = response.data;
-        testCase.name='copy_'+testCase.name
+        testCase.name = 'copy_' + testCase.name
         this.$emit('testCaseCopy', testCase);
       });
     },
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
index 7a5b16c6aa..793b120a56 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@@ -472,7 +472,9 @@ export default {
             }
           }
           this.selectRows.clear();
-          this.$refs.table.doLayout();
+          if (this.$refs.table) {
+            this.$refs.table.doLayout();
+          }
         });
       }
       getLabel(this, TEST_PLAN_FUNCTION_TEST_CASE);