bugfix: 表格锁边及滚动问题 (close TencentBlueKing#364)

GONGONGONG · Dec 16, 2021 · 7a98d23 · 7a98d23
1 parent 4268dd0
commit 7a98d23
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 22 deletions.
diff --git a/dev_log/2.1.360/daoqgong_202112161652.yaml b/dev_log/2.1.360/daoqgong_202112161652.yaml
@@ -0,0 +1,3 @@
+---
+bugfix:
+  - "表格锁边及滚动问题 (fixed #364)"
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
@@ -220,6 +220,10 @@ body {
             color: #979ba5;
         }
     }
+    .bk-table-fixed,
+    .bk-table-fixed-right {
+        bottom: 0!important;
+    }
 }
 
 /* table 做出展开角标 */

diff --git a/frontend/src/views/agent/agent-list.vue b/frontend/src/views/agent/agent-list.vue
@@ -235,15 +235,20 @@
           </template>
         </bk-table-column>
         <bk-table-column
+          fixed
           key="IP"
           label="IP"
-          prop="inner_ip">
+          prop="inner_ip"
+          width="110"
+          show-overflow-tooltip>
         </bk-table-column>
         <bk-table-column
           key="login_ip"
           :label="$t('登录IP')"
           prop="login_ip"
-          v-if="filter['login_ip'].mockChecked">
+          width="110"
+          v-if="filter['login_ip'].mockChecked"
+          show-overflow-tooltip>
           <template #default="{ row }">
             {{ row.login_ip | filterEmpty }}
           </template>
@@ -1764,9 +1769,6 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
   position: relative;
   left: 3px;
 }
->>> .bk-table-fixed-right-patch {
-  display: none;
-}
 .agent {
   min-height: calc(100vh - 112px);
   padding-bottom: 82px;

diff --git a/frontend/src/views/plugin/plugin-list/node-detail-table.vue b/frontend/src/views/plugin/plugin-list/node-detail-table.vue
@@ -322,9 +322,6 @@ export default class PluginRuleTable extends Vue {
     }
     >>> .bk-table-expanded-cell {
       padding: 0 0 0 30px;
-      .bk-table-fixed-right {
-        border-bottom: 0;
-      }
     }
     >>> .is-last .cell {
       border-left: 0;

diff --git a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue
@@ -387,10 +387,6 @@ export default class PluginRuleTable extends Mixins(FormLabelMixin, HeaderRender
       padding-left: 0;
     }
   }
-  >>> .bk-table-fixed {
-    /* stylelint-disable-next-line declaration-no-important */
-    bottom: 0 !important;
-  }
   .checkbox-row-item {
     display: flex;
     .col-status {

diff --git a/frontend/src/views/plugin/plugin-rule/plugin-rule-create/version-detail-table.vue b/frontend/src/views/plugin/plugin-rule/plugin-rule-create/version-detail-table.vue
@@ -13,16 +13,19 @@
         class="detail-table-left"
         v-test.policy="'chooseVersionTable'"
         :row-class-name="handleRowClass"
+        :max-height="500"
         @row-click="handleRowClick">
         <bk-table-column width="60" align="center">
           <template #default="{ row }">
-            <bk-radio v-test.policy="'versionRadio'" :disabled="row.disabled"
-                      :value="selectedVersion === row.version"
-                      width="90"
-                      v-bk-tooltips.left="{
-                        content: row.isBelowVersion ? $t('版本未处于正式状态') : $t('不能低于当前版本'),
-                        disabled: !row.disabled
-                      }">
+            <bk-radio
+              v-test.policy="'versionRadio'" :disabled="row.disabled"
+              :ref="selectedVersion === row.version ? 'selectedRowRef' : ''"
+              :value="selectedVersion === row.version"
+              width="90"
+              v-bk-tooltips.left="{
+                content: row.isBelowVersion ? $t('版本未处于正式状态') : $t('不能低于当前版本'),
+                disabled: !row.disabled
+              }">
             </bk-radio>
           </template>
         </bk-table-column>
@@ -63,7 +66,7 @@
   </bk-dialog>
 </template>
 <script lang="ts">
-import { Vue, Component, Prop, Emit, Model, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Emit, Model, Watch, Ref } from 'vue-property-decorator';
 import { IPkVersionRow } from '@/types/plugin/plugin-type';
 
 @Component({
@@ -75,6 +78,8 @@ export default class VersionDetailTable extends Vue {
   @Prop({ default: false, type: Boolean }) private readonly loading!: boolean;
   @Prop({ type: String, default: '' }) private readonly version!: string;
 
+  @Ref('selectedRowRef') private readonly selectedRowRef!: any;
+
   private selectedVersion = '';
   private selectedRow: IPkVersionRow | null = null;
   private markdown = '';
@@ -86,6 +91,11 @@ export default class VersionDetailTable extends Vue {
     } else {
       this.selectedVersion = this.version;
       this.selectedRow = this.data.find(row => row.version === this.version) || null;
+      if (this.selectedRow) {
+        this.$nextTick(() => {
+          this.selectedRowRef && this.selectedRowRef.$el.scrollIntoView();
+        });
+      }
     }
   }
 

diff --git a/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue b/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue
@@ -132,7 +132,7 @@
           {{ row.update_time | filterTimezone }}
         </template>
       </bk-table-column>
-      <bk-table-column prop="colspanOperate" :label="$t('操作')" width="150" :resizable="false">
+      <bk-table-column prop="colspanOperate" :label="$t('操作')" width="150" :resizable="false" fixed="right">
         <template #default="{ row }">
           <template v-if="row.id === deleteId">
             <loading-icon class="mr5"></loading-icon>
@@ -222,7 +222,8 @@
         prop="colspanSetting"
         :render-header="renderHeader"
         width="42"
-        :resizable="false">
+        :resizable="false"
+        fixed="right">
         <template #default="{ row }">
           <div class="operate">
             <span class="more-btn" @click="handleShowMore($event, row)">