n20-common-lib 2.22.46 → 2.22.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.46",
+  "version": "2.22.48",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/TablePro/index.vue

@@ -15,19 +15,14 @@
       }"
       show-header-overflow
       show-overflow
-      :row-config="{
-        isHover: true,
-        useKey: true,
-        ...$attrs.rowConfig,
-        ...$attrs['row-config']
-      }"
+      :row-config="computedRowConfig"
       :column-config="{
         resizable: true,
         useKey: true,
         ...$attrs.columnConfig,
         ...$attrs['column-config']
       }"
-      :scroll-y="scrollY"
+      :scroll-y="computedScrollY"
       :sort-config="{
         multiple: false,
         remote: true,
@@ -43,7 +38,7 @@
         iconMatch: 'n20-icon-xiala-moren'
       }"
       :merge-cells="mergeCells"
-      v-bind="Object.assign({ size: size }, $attrs, sizeBind, $attrs.small)"
+      v-bind="computedTableAttrs"
       v-on="$listeners"
       @sort-change="(val) => customSortMethod(val)"
       @filter-change="filterChange"
@@ -144,7 +139,6 @@
 import empty from '../Empty'
 import tableSetSize from '../TableSetSize/index.vue'
 import { $lc } from '../../utils/i18n/index.js'
-import XEUtils from 'xe-utils'
 
 /** 将 Element 表格风格的 show-overflow-tooltip 转为 vxe-column 的 show-overflow */
 function hasOverflowTooltipKey(item) {
@@ -186,6 +180,15 @@ function mapColumnOverflowForVxe(item) {
   }
   return applyTooltipToShowOverflow(item)
 }
+// vxe-table 3.6 在渲染行数超过 40 时会防抖更新虚拟滚动数据，快速滚动容易露出空白。
+// 保持较小的默认缓冲，让常见高度下走同步更新路径；业务仍可通过 scroll-y.oSize 覆盖。
+const DEFAULT_SCROLL_Y = { enabled: true, oSize: 6, gt: 30 }
+const VXE_ROW_HEIGHT_MAP = {
+  default: 48,
+  medium: 44,
+  small: 40,
+  mini: 36
+}
 const renderer = {
   name: 'renderer',
   props: {
@@ -211,9 +214,13 @@ export default {
     scrollY: {
       type: Object,
       default: () => {
-        return { enabled: true, oSize: 20, gt: 30 }
+        return { ...DEFAULT_SCROLL_Y }
       }
     },
+    dynamicRowHeight: {
+      type: Boolean,
+      default: false
+    },
     data: {
       type: Array,
       default: undefined
@@ -284,6 +291,45 @@ export default {
     }
   },
   computed: {
+    tableBindSource() {
+      const attrs = { ...this.$attrs }
+      const small = attrs.small
+      delete attrs.rowConfig
+      delete attrs['row-config']
+      delete attrs.scrollY
+      delete attrs['scroll-y']
+      delete attrs.small
+      return Object.assign({ size: this.sizeC || this.size }, attrs, this.sizeBind, small)
+    },
+    computedTableAttrs() {
+      return this.tableBindSource
+    },
+    computedRowConfig() {
+      const rowConfig = {
+        isHover: true,
+        useKey: true,
+        ...this.$attrs.rowConfig,
+        ...this.$attrs['row-config']
+      }
+      if (!this.dynamicRowHeight && rowConfig.height === undefined) {
+        rowConfig.height = this.getVirtualRowHeight()
+      }
+      return rowConfig
+    },
+    computedScrollY() {
+      const scrollY = {
+        ...DEFAULT_SCROLL_Y,
+        ...(this.scrollY || {})
+      }
+      if (this.dynamicRowHeight) {
+        scrollY.enabled = false
+        return scrollY
+      }
+      if (scrollY.rHeight === undefined) {
+        scrollY.rHeight = this.getVirtualRowHeight()
+      }
+      return scrollY
+    },
     _columns() {
       const raw = this.isAutoWidth ? this.calcColumnWidth(this.columns) : this.columns
       return raw.map(mapColumnOverflowForVxe)
@@ -292,9 +338,11 @@ export default {
   watch: {
     columns() {
       this.colsKey = this.colsKey + 1
+      this.refreshTableLayout()
     },
     size(val) {
       this.sizeC = val
+      this.refreshTableLayout()
     },
     data() {
       // 翻页清除选中
@@ -307,6 +355,7 @@ export default {
         if (this.mergeCells && this.mergeCells.length > 0 && this.$refs.vxeTable) {
           this.$refs.vxeTable.setMergeCells(this.mergeCells)
         }
+        this.refreshTableLayout()
       })
     }
   },
@@ -317,9 +366,36 @@ export default {
       if (this.mergeCells && this.mergeCells.length > 0 && this.$refs.vxeTable) {
         this.$refs.vxeTable.setMergeCells(this.mergeCells)
       }
+      this.refreshTableLayout()
     })
   },
   methods: {
+    getVirtualRowHeight() {
+      const rowConfig = {
+        ...this.$attrs.rowConfig,
+        ...this.$attrs['row-config']
+      }
+      if (rowConfig.height !== undefined) {
+        return rowConfig.height
+      }
+      if (this.scrollY && this.scrollY.rHeight !== undefined) {
+        return this.scrollY.rHeight
+      }
+      const tableSize = this.tableBindSource.size || this.sizeC || 'default'
+      return VXE_ROW_HEIGHT_MAP[tableSize] || VXE_ROW_HEIGHT_MAP.default
+    },
+    refreshTableLayout() {
+      this.$nextTick(() => {
+        const xTable = this.$refs.vxeTable
+        if (!xTable) return
+        const recalculate = typeof xTable.recalculate === 'function' ? xTable.recalculate(true) : Promise.resolve()
+        Promise.resolve(recalculate).then(() => {
+          if (xTable && typeof xTable.refreshScroll === 'function') {
+            xTable.refreshScroll()
+          }
+        })
+      })
+    },
     // 全选/反选
     toggleAllSelection() {
       if (!this.$refs.vxeTable) return
@@ -524,9 +600,11 @@ export default {
     sizeUp(size) {
       this.sizeC = size
       this.$emit('update:size', size)
+      this.refreshTableLayout()
     },
     sizeSet(el) {
       this.sizeBind = el
+      this.refreshTableLayout()
     },
     // 计算列宽
     calcColumnWidth(columns) {