@idooel/components 0.0.3-beta.2 → 0.0.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.3-beta.2",
+  "version": "0.0.3-beta.3",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/models/tree-table-model/src/index.vue

@@ -140,6 +140,7 @@ export default {
       tableQuerys: {},
       resizeObserverModelTableWrapper: null,
       resizeObserverModelTableContainer: null,
+      resizeObserverSearchArea: null,
       modelTableWrapperHeight: 0,
       currentTreeNodeData: {},
       currentRowData: {},
@@ -1149,19 +1150,9 @@ export default {
       
       const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()
       this.tableWidth = width
-      
-      // 获取分页组件的高度（如果存在）
-      let paginationHeight = 0
-      const paginationEl = tableRef.$el.querySelector('.g-table__pagination')
-      if (paginationEl) {
-        paginationHeight = paginationEl.getBoundingClientRect().height || 50
-      } else {
-        // 如果分页组件还未渲染，使用默认高度
-        paginationHeight = 50
-      }
-      
-      // 计算表格高度：视口高度 - 表格顶部距离 - 分页高度 - 额外高度
-      const calculatedHeight = currentViewportHeight - tableToTop - paginationHeight - this.overHeight - 20
+
+      // 计算表格高度：外层容器高度应覆盖到视口底部；分页高度由 ele-table 内部自行扣减
+      const calculatedHeight = currentViewportHeight - tableToTop - this.overHeight
       // 确保最小高度，避免表格过小
       this.tableHeight = Math.max(calculatedHeight, 200)
     },
@@ -1181,6 +1172,23 @@ export default {
         this.treeWrapperHeight = height - titleHeight
       }
     },
+    observeSearchAreaHeight () {
+      const searchAreaRef = this.$refs[this.searchArea]
+      const searchAreaEl = searchAreaRef && searchAreaRef.$el
+      if (!searchAreaEl || typeof ResizeObserver === 'undefined') return
+
+      this.resizeObserverSearchArea = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          requestAnimationFrame(() => {
+            this.calculateTableHeight()
+            if (this.showTree) {
+              this.calculateTreeHeight()
+            }
+          })
+        }
+      })
+      this.resizeObserverSearchArea.observe(searchAreaEl)
+    },
     async keepAliveRefresh () {
       return this.withPerformanceMonitoring('keepAliveRefresh', async () => {
         // 重新计算表格高度（应对窗口大小变化）
@@ -1223,6 +1231,7 @@ export default {
       setTimeout(() => {
         this.calculateTableHeight()
         this.calculateTreeHeight()
+        this.observeSearchAreaHeight()
       }, 200)
     })
     
@@ -1277,6 +1286,9 @@ export default {
     if (this.resizeObserverModelTableContainer) {
       this.resizeObserverModelTableContainer.disconnect()
     }
+    if (this.resizeObserverSearchArea) {
+      this.resizeObserverSearchArea.disconnect()
+    }
     if (this.handleResize) {
       window.removeEventListener('resize', this.handleResize)
     }

package/packages/table/src/index.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="g-table__wrapper" ref="tableWrapper" :style="wrapperStyle">
-    <a-table
-      :key="tableRenderKey"
-      :bordered="bordered"
-      :class="[isNoData && 'g-table__no-data']"
-      :pagination="false"
-      :loading="loading"
-      size="middle"
-      :columns="smartColumns"
-      :row-selection="smartRowSelection"
-      :row-class-name="setRowClassName"
-      :data-source="dataSource"
-      :scroll="smartScroll">
-      <template slot="action" slot-scope="record">
-        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
-      </template>
-    </a-table>
+  <div class="g-table__wrapper" :class="{ 'g-table__wrapper--need-h-scroll': needHorizontalScroll }" ref="tableWrapper" :style="wrapperStyle">
+    <div class="g-table__main">
+      <a-table
+        :key="tableRenderKey"
+        :bordered="bordered"
+        :class="[isNoData && 'g-table__no-data']"
+        :pagination="false"
+        :loading="loading"
+        size="middle"
+        :columns="smartColumns"
+        :row-selection="smartRowSelection"
+        :row-class-name="setRowClassName"
+        :data-source="dataSource"
+        :scroll="smartScroll">
+        <template slot="action" slot-scope="record">
+          <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
+        </template>
+      </a-table>
+    </div>
     <div class="g-table__pagination">
       <a-pagination
         :show-total="all => `共 ${all} 条数据`"
@@ -152,8 +154,12 @@ export default {
       return !this.dataSource.length
     },
     getScrollHeightByHeight () {
-      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
-      return this.height - this.tableHeaderHeight - this.paginationHeight
+      // 始终基于稳定的表头/分页高度计算可用区域，避免 fallback 造成内容压到分页区
+      const headerHeight = this.tableHeaderHeight || 64
+      const paginationHeight = this.paginationHeight || 64
+      const rawHeight = this.height - headerHeight - paginationHeight
+      // 规避小数像素导致的 1px 裁切，给表体预留 1px 安全边距
+      return Math.max(Math.floor(rawHeight) - 1, 0)
     },
     isFlexColumn () {
       return this.columns.every(col => !col.width)
@@ -175,12 +181,43 @@ export default {
       }
       return total
     },
+    estimatedMinContentWidth () {
+      const cols = this.innerColumns || []
+      let specifiedWidthSum = 0
+      let unspecifiedCount = 0
+      cols.forEach(col => {
+        const w = col && col.width
+        if (typeof w === 'number') {
+          specifiedWidthSum += w
+        } else {
+          unspecifiedCount += 1
+        }
+      })
+      const selectionWidth = this.rowSelection ? 60 : 0
+      const operationWidth = (this.operations && typeof this.operations.width === 'number') ? this.operations.width : 0
+      // 未配置宽度列给更保守的最小宽度，贴近运行时真实占宽，
+      // 避免“容器已明显缩小但横向滚动仍不触发”。
+      const unspecifiedMinWidth = unspecifiedCount * 320
+      return specifiedWidthSum + unspecifiedMinWidth + selectionWidth + operationWidth
+    },
+    hasIncompleteColumnWidth () {
+      const cols = this.innerColumns || []
+      if (!cols.length) return false
+      return cols.some(col => typeof (col && col.width) !== 'number')
+    },
     /**
      * 是否需要横向滚动：容器宽度 < 列总宽度
      */
     needHorizontalScroll () {
       // 未获取容器宽度前，先假定需要滚动（保守策略）
       if (!this.containerWidth) return true
+      // 存在未配置 width 的列时，totalColumnsWidth 会低估真实内容宽度；
+      // 此时改用保守阈值判定，避免误判导致列被压缩变形。
+      if (this.hasIncompleteColumnWidth) {
+        const baseFallbackX = typeof this.x === 'number' ? this.x : 1200
+        const fallbackX = Math.max(baseFallbackX, this.estimatedMinContentWidth)
+        return this.containerWidth < fallbackX - 5
+      }
       // 加一点容差
       return this.containerWidth < this.totalColumnsWidth - 5
     },
@@ -210,19 +247,29 @@ export default {
      */
     smartScroll () {
       if (!this.needHorizontalScroll) {
-        // 不需要横向滚动，只保留 y 方向（如果需要）
-        if (this.height && this.needScrollY) {
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
-            ? this.getScrollHeightByHeight 
-            : this.height - 100
+        // 不需要横向滚动时，只要存在高度约束就下发 y。
+        // 旧逻辑依赖估算行高 needScrollY，遇到多行文本/变高行时会误判，
+        // 导致 body 自然撑高（overflow: visible），内容超出可视区却没有纵向滚动。
+        if (this.height) {
+          const availableHeight = this.getScrollHeightByHeight
           if (availableHeight > 50) {
             return { y: availableHeight }
           }
         }
         return {}
       }
-      // 需要横向滚动，使用原有逻辑
-      return this.getScroll
+      // 需要横向滚动时，若未设置 y，会导致横向滚动条落在超高表体底部，
+      // 外层容器 overflow:hidden 场景下用户看不到滚动条。
+      // 这里在有高度约束时强制注入 y，保证横向滚动条始终在可视区域内。
+      const baseScroll = this.getScroll || {}
+      if (this.height && (baseScroll.y === undefined || baseScroll.y === null)) {
+        const availableHeight = this.getScrollHeightByHeight
+        if (availableHeight > 50) {
+          return { ...baseScroll, y: availableHeight }
+        }
+      }
+      // 需要横向滚动，其他情况使用原有逻辑
+      return baseScroll
     },
     /**
      * 智能 rowSelection 配置：
@@ -260,17 +307,20 @@ export default {
           // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差
           const selectionWidth = this.rowSelection ? 60 : 0
 
-          // 只有当所有列都明确给了宽度（total > 0）时才 clamp
-          if (total > 0) {
+          // 只有所有列都明确给了 width 时才 clamp，避免低估导致表格被挤压
+          const allColsHaveWidth = cols.length > 0 && cols.every(col => typeof (col && col.width) === 'number')
+          if (allColsHaveWidth && total > 0) {
             const minX = total + selectionWidth
             if (baseX > minX) baseX = minX
           }
+          // 存在未配置宽度列时，x 至少取估算最小内容宽度，
+          // 避免出现 needHorizontalScroll=true 但 scrollWidth==clientWidth 的“无滚动条”状态。
+          if (this.hasIncompleteColumnWidth) {
+            baseX = Math.max(baseX, this.estimatedMinContentWidth)
+          }
         }
-        
         if (this.height && this.needScrollY) {
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
-            ? this.getScrollHeightByHeight 
-            : this.height - 100
+          const availableHeight = this.getScrollHeightByHeight
           
           if (availableHeight > 50) {
             return { x: baseX, y: availableHeight }
@@ -319,7 +369,7 @@ export default {
     },
     setTableHeaderHeight () {
       this.$nextTick(() => {
-        const el = this.$el.querySelector('.ant-table-header')
+        const el = this.$el.querySelector('.ant-table-header') || this.$el.querySelector('.ant-table-thead')
         if (!el) return
         const { height } = el.getBoundingClientRect()
         this.tableHeaderHeight = height
@@ -442,10 +492,13 @@ export default {
       this._containerResizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const newWidth = entry.contentRect.width
+          const delta = Math.abs(newWidth - this.containerWidth)
+          const oldNeedScroll = this.needHorizontalScroll
+          // 始终更新容器宽度，避免临界区被阈值过滤后状态滞留。
+          this.containerWidth = newWidth
+          const newNeedScroll = this.needHorizontalScroll
           // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染
-          if (Math.abs(newWidth - this.containerWidth) > 10) {
-            const oldNeedScroll = this.needHorizontalScroll
-            this.containerWidth = newWidth
+          if (delta > 10 || newNeedScroll !== oldNeedScroll) {
             // 容器宽度变化会触发 needHorizontalScroll 的重新计算
             // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步
             // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突
@@ -459,18 +512,16 @@ export default {
               })
               
               // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步
-              // 如果状态变化了，watcher 会处理重新渲染
-              if (this.needHorizontalScroll === oldNeedScroll) {
-                // 防抖：延迟同步固定列，避免频繁调用
-                if (this._resizeDebounceTimer) {
-                  clearTimeout(this._resizeDebounceTimer)
-                }
-                this._resizeDebounceTimer = setTimeout(() => {
-                  this.syncFixedColumns()
-                  this.syncHeaderTableWidth()
-                  this.bindScrollSync()
-                }, 150)
+              // 状态变化时 watcher 会重渲染，但这里仍补一次同步，避免出现
+              // “缩小后没滚动，刷新后才出现”的时序窗口。
+              if (this._resizeDebounceTimer) {
+                clearTimeout(this._resizeDebounceTimer)
               }
+              this._resizeDebounceTimer = setTimeout(() => {
+                this.syncFixedColumns()
+                this.syncHeaderTableWidth()
+                this.bindScrollSync()
+              }, 150)
             })
           }
         }
@@ -532,15 +583,27 @@ export default {
 
 <style lang="scss" scoped>
 .g-table__wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  .g-table__main {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
   /**
    * 修复"宽屏下表格两侧出现空白"问题：
    * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，
    * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。
    * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。
    */
-  ::v-deep .ant-table-scroll .ant-table-header table,
-  ::v-deep .ant-table-scroll .ant-table-body table {
-    min-width: 100%;
+  &:not(.g-table__wrapper--need-h-scroll) {
+    ::v-deep .ant-table-scroll .ant-table-header table,
+    ::v-deep .ant-table-scroll .ant-table-body table {
+      min-width: 100%;
+    }
   }
 
   /**
@@ -585,19 +648,22 @@ export default {
   /* 空数据状态顶部显示 */
   .g-table__no-data {
     position: relative;
+    ::v-deep .ant-table-placeholder > td {
+      height: auto !important;
+      line-height: normal !important;
+      padding-top: 24px !important;
+      padding-bottom: 24px !important;
+    }
     ::v-deep .ant-table-placeholder {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -40%);
-      width: 100%;
-      height: 100%;
+      position: static;
+      width: auto;
+      height: auto;
       text-align: center;
       color: #999;
       font-size: 14px;
       font-weight: normal;
       line-height: 20px;
-      overflow: hidden;
+      overflow: visible;
       border: unset;
     }
   }