fix: 固定列的表格，列宽设置

针对固定列的表格，设置最小列宽，避免拖动过程中由于表头换行导致的表格固定列和普通列的错位
2021-02-01 15:02:53 +08:00 · 2021-02-01 15:02:53 +08:00 · 879268610d
parent 37feff4281
commit 879268610d
5 changed files with 105 additions and 20 deletions
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@ -20,7 +20,7 @@
                                        @selectPageAll="isSelectDataAll(false)"
                                        @selectAll="isSelectDataAll(true)"/>

-        <el-table-column v-if="!referenced" width="30" :resizable="false" align="center">
+        <el-table-column v-if="!referenced" width="30" min-width="30" :render-header="labelHead" :resizable="false" align="center">
          <template v-slot:default="scope">
            <show-more-btn :is-show="isSelect(scope.row)" :buttons="buttons" :size="selectDataCounts"/>
          </template>
@ -28,6 +28,7 @@

        <el-table-column prop="num" label="ID"
                         sortable="custom"
+                         min-width="120px" :render-header="labelHead"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip content="编辑">
@ -39,13 +40,16 @@
                         sortable="custom"
                         :label="$t('api_test.automation.scenario_name')"
                         show-overflow-tooltip
+                         :render-header="labelHead"
                         min-width="120px"/>
        <el-table-column prop="level"
                         sortable="custom"
                         column-key="level"
                         :filters="levelFilters"
+                         min-width="120px"
+                         :render-header="labelHead"
                         :label="$t('api_test.automation.case_level')"
-                         show-overflow-tooltip min-width="120px">
+                         show-overflow-tooltip>
          <template v-slot:default="scope">
            <priority-table-item :value="scope.row.level"/>
          </template>
@ -54,32 +58,37 @@
                         sortable="custom"
                         column-key="status"
                         :filters="statusFilters"
+                         :render-header="labelHead"
                         show-overflow-tooltip min-width="120px">
          <template v-slot:default="scope">
            <plan-status-table-item :value="scope.row.status"/>
          </template>
        </el-table-column>
-        <el-table-column prop="tags" :label="$t('api_test.automation.tag')">
+        <el-table-column prop="tags" min-width="120px"
+                         :render-header="labelHead" :label="$t('api_test.automation.tag')">
          <template v-slot:default="scope">
            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
              <ms-tag type="success" effect="plain" :content="itemName"/>
            </div>
          </template>
        </el-table-column>
-        <el-table-column prop="userId" :label="$t('api_test.automation.creator')"
+        <el-table-column prop="userId" min-width="120px"
+                         :render-header="labelHead" :label="$t('api_test.automation.creator')"
                         :filters="userFilters"
                         column-key="user_id"
                         sortable="custom"
-                         min-width="100px"
                         show-overflow-tooltip/>
-        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom" width="180">
+        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom"  min-width="180px"
+                         :render-header="labelHead">
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
-        <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" show-overflow-tooltip/>
+        <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" min-width="80px"
+                         :render-header="labelHead" show-overflow-tooltip/>
        <el-table-column prop="lastResult" :label="$t('api_test.automation.last_result')"
                         :filters="resultFilters"
+                         :render-header="labelHead"
                         sortable="custom" column-key="last_result" min-width="120px">
          <template v-slot:default="{row}">
            <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
@ -91,6 +100,8 @@
          </template>
        </el-table-column>
        <el-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
+                         min-width="120px"
+                         :render-header="labelHead"
                         show-overflow-tooltip/>
        <el-table-column fixed="right" :label="$t('commons.operating')" width="190px" v-if="!referenced">
          <template v-slot:default="{row}">
@ -598,6 +609,13 @@
        _filter(filters, this.condition);
        this.search();
      },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
      openScenario(item) {
        this.$emit('openScenario', item)
      },
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@ -25,13 +25,13 @@
          @selectPageAll="isSelectDataAll(false)"
          @selectAll="isSelectDataAll(true)"/>

-        <el-table-column width="30" :resizable="false" align="center">
+        <el-table-column width="30" :resizable="false" min-width="30px" :render-header="labelHead" align="center">
          <template v-slot:default="scope">
            <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
          </template>
        </el-table-column>

-        <el-table-column prop="num" label="ID" min-width="120px" show-overflow-tooltip>
+        <el-table-column prop="num" label="ID" min-width="120px" :render-header="labelHead" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip content="编辑">
              <a style="cursor:pointer" @click="handleTestCase(scope.row)"> {{ scope.row.num }} </a>
@ -39,13 +39,14 @@
          </template>
        </el-table-column>

-        <el-table-column prop="name" min-width="160px" :label="$t('test_track.case.name')" show-overflow-tooltip/>
+        <el-table-column prop="name" min-width="160px" :render-header="labelHead" :label="$t('test_track.case.name')" show-overflow-tooltip/>

        <el-table-column
          prop="priority"
          :filters="priorityFilters"
          column-key="priority"
          min-width="120px"
+          :render-header="labelHead"
          :label="$t('test_track.case.priority')"
          show-overflow-tooltip>
          <template v-slot:default="scope">
@ -58,9 +59,10 @@
          prop="path"
          min-width="180px"
          :label="$t('api_test.definition.api_path')"
+          :render-header="labelHead"
          show-overflow-tooltip/>

-        <el-table-column prop="tags" min-width="120px" :label="$t('commons.tag')">
+        <el-table-column prop="tags" min-width="120px" :render-header="labelHead" :label="$t('commons.tag')">
          <template v-slot:default="scope">
            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
              <ms-tag type="success" effect="plain" :content="itemName"/>
@ -71,12 +73,14 @@
        <el-table-column
          prop="createUser"
          :label="'创建人'"
+          :render-header="labelHead"
          show-overflow-tooltip/>

        <el-table-column
          sortable="custom"
-          width="160"
+          min-width="160"
          :label="$t('api_test.definition.api_last_time')"
+          :render-header="labelHead"
          prop="updateTime">
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@ -85,11 +89,6 @@

        <el-table-column fixed="right" v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
          <template v-slot:default="scope">
-            <!--<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">{{$t('commons.reduction')}}</el-button>-->
-<!--            <el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{ $t('commons.edit') }}-->
-<!--            </el-button>-->
-<!--            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{ $t('commons.delete') }}-->
-<!--            </el-button>-->
            <ms-table-operator-button :tip="$t('commons.edit')" icon="el-icon-edit" @exec="handleTestCase(scope.row)" v-tester/>
            <ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete" @exec="handleDelete(scope.row)" type="danger" v-tester/>
            <ms-api-case-table-extend-btns @showCaseRef="showCaseRef" @showEnvironment="showEnvironment" @createPerformance="createPerformance" :row="scope.row" v-tester/>
@ -508,6 +507,13 @@ export default {
        this.clickRow = row;
        this.$refs.setEnvironment.open(row);
      },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
      createPerformance(row, environment) {
        /**
         * 思路：调用后台创建性能测试的方法，把当前案例的hashTree在后台转化为jmx并文件创建性能测试。
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@ -24,13 +24,15 @@
          @selectPageAll="isSelectDataAll(false)"
          @selectAll="isSelectDataAll(true)"/>

-        <el-table-column width="30" :resizable="false" align="center">
+        <el-table-column min-width="30" :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>

        <el-table-column prop="num" label="ID" show-overflow-tooltip
+                         min-width="80px"
+                         :render-header="labelHead"
                         sortable="custom">
          <template slot-scope="scope">
            <el-tooltip content="编辑">
@ -40,12 +42,14 @@
        </el-table-column>
        <el-table-column prop="name" :label="$t('api_test.definition.api_name')"
                         show-overflow-tooltip
+                         :render-header="labelHead"
                         sortable="custom" min-width="120px"/>
        <el-table-column
          prop="status"
          column-key="status"
          sortable="custom"
          :filters="statusFilters"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_status')" min-width="120px">
          <template v-slot:default="scope">
            <span class="el-dropdown-link">
@ -59,6 +63,7 @@
          sortable="custom"
          column-key="method"
          :filters="methodFilters"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_type')"
          show-overflow-tooltip min-width="120px">
          <template v-slot:default="scope" class="request-method">
@ -74,15 +79,19 @@
          sortable="custom"
          :filters="userFilters"
          column-key="user_id"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_principal')"
          show-overflow-tooltip min-width="100px"/>

        <el-table-column
          prop="path"
+          min-width="120px"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_path')"
          show-overflow-tooltip/>

-        <el-table-column prop="tags" :label="$t('commons.tag')">
+        <el-table-column prop="tags" :label="$t('commons.tag')" min-width="80px"
+                         :render-header="labelHead">
          <template v-slot:default="scope">
            <div v-for="(itemName,index)  in scope.row.tags" :key="index">
              <ms-tag type="success" effect="plain" :content="itemName"/>
@ -94,6 +103,8 @@
          width="160"
          :label="$t('api_test.definition.api_last_time')"
          sortable="custom"
+          min-width="160px"
+          :render-header="labelHead"
          prop="updateTime">
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@ -102,17 +113,23 @@

        <el-table-column
          prop="caseTotal"
+          min-width="80px"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_case_number')"
          show-overflow-tooltip/>

        <el-table-column
          prop="caseStatus"
+          min-width="80px"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_case_status')"
          show-overflow-tooltip/>

        <el-table-column
          prop="casePassingRate"
          :width="100"
+          min-width="100px"
+          :render-header="labelHead"
          :label="$t('api_test.definition.api_case_passing_rate')"
          show-overflow-tooltip/>

@ -634,6 +651,13 @@
        _filter(filters, this.condition);
        this.initTable();
      },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
      open() {
        this.$refs.searchBar.open();
      }
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@ -562,6 +562,13 @@ export default {
        this.selectDataCounts = this.selectRows.size;
      }
    },
+    labelHead(h,{column,index}){
+      if(column.minWidth>column.realWidth){
+        column.realWidth = column.minWidth;
+        column.width = column.minWidth;
+      }
+      return column.label;
+    },
    moveSave(param) {
      param.condition = this.condition;
      this.result = this.$post('/test/case/batch/edit', param, () => {
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@ -48,17 +48,23 @@
          prop="num"
          sortable="custom"
          :label="$t('commons.id')"
+          min-width="120px"
+          :render-header="labelHead"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          :label="$t('commons.name')"
+          min-width="120px"
+          :render-header="labelHead"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="priority"
          :filters="priorityFilters"
          column-key="priority"
+          min-width="100px"
+          :render-header="labelHead"
          :label="$t('test_track.case.priority')">
          <template v-slot:default="scope">
            <priority-table-item :value="scope.row.priority" ref="priority"/>
@ -70,13 +76,16 @@
          :filters="typeFilters"
          column-key="type"
          :label="$t('test_track.case.type')"
+          min-width="80px"
+          :render-header="labelHead"
          show-overflow-tooltip>
          <template v-slot:default="scope">
            <type-table-item :value="scope.row.type"/>
          </template>
        </el-table-column>

-        <el-table-column prop="tags" :label="$t('commons.tag')">
+        <el-table-column prop="tags" :label="$t('commons.tag')" min-width="120px"
+                         :render-header="labelHead">
          <template v-slot:default="scope">
            <div v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index">
              <ms-tag type="success" effect="plain" :content="tag"/>
@ -89,6 +98,8 @@
          :filters="methodFilters"
          column-key="method"
          :label="$t('test_track.case.method')"
+          min-width="100px"
+          :render-header="labelHead"
          show-overflow-tooltip>
          <template v-slot:default="scope">
            <method-table-item :value="scope.row.method"/>
@ -98,17 +109,23 @@
        <el-table-column
          prop="nodePath"
          :label="$t('test_track.case.module')"
+          min-width="120px"
+          :render-header="labelHead"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="projectName"
          :label="$t('test_track.plan.plan_project')"
+          min-width="120px"
+          :render-header="labelHead"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          :label="$t('test_track.issue.issue')"
+          min-width="80px"
+          :render-header="labelHead"
          show-overflow-tooltip>
          <template v-slot:default="scope">
            <el-popover
@ -141,6 +158,8 @@
        <el-table-column
          prop="executorName"
          :filters="executorFilters"
+          min-width="100px"
+          :render-header="labelHead"
          column-key="executor"
          :label="$t('test_track.plan_view.executor')">
        </el-table-column>
@ -149,6 +168,8 @@
          prop="status"
          :filters="statusFilters"
          column-key="status"
+          min-width="100px"
+          :render-header="labelHead"
          :label="$t('test_track.plan_view.execute_result')">
          <template v-slot:default="scope">
            <span @click.stop="clickt = 'stop'">
@ -181,6 +202,8 @@
          sortable
          prop="updateTime"
          :label="$t('commons.update_time')"
+          min-width="120px"
+          :render-header="labelHead"
          show-overflow-tooltip>
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@ -572,6 +595,13 @@ export default {
      _sort(column, this.condition);
      this.initTableData();
    },
+    labelHead(h,{column,index}){
+      if(column.minWidth>column.realWidth){
+        column.realWidth = column.minWidth;
+        column.width = column.minWidth;
+      }
+      return column.label;
+    },
    batchEdit(form) {
      let param = {};
      param[form.type] = form.value;