@idooel/components 0.0.2-beta.32 → 0.0.2-beta.34

package/packages/table/src/index.vue

@@ -1,611 +1,612 @@
-<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__pagination">
-      <a-pagination
-        :show-total="all => `共 ${all} 条数据`"
-        v-if="mode === 'default'"
-        show-size-changer 
-        show-quick-jumper
-        :pageSize="innerPageSize"
-        :current="innerCurrentPage"
-        :pageSizeOptions="pageSizeOptions"
-        @change="onChangePagination"
-        @showSizeChange="onShowSizeChange"
-        :total="total">
-      </a-pagination>
-      <ele-pagination
-        v-else
-        :pageSize="innerPageSize"
-        :current="innerCurrentPage"
-        :pageSizeOptions="pageSizeOptions"
-        :data="dataSource"
-        :loading="countLoading"
-        @change="onChangePagination"
-        @showSizeChange="onShowSizeChange"
-        :total="total"
-      ></ele-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import Actions from './action.vue'
-export default {
-  name: 'ele-table',
-  components: {
-    Actions
-  },
-  props: {
-    mode: {
-      type: String,
-      default: 'default',
-      validator: (value) => {
-        return ['default', 'next-cursor'].includes(value)
-      }
-    },
-    // ant table wrapper
-    height: {
-      type: Number
-    },
-    width: {
-      type: Number
-    },
-    x: {
-      // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）
-      type: [Number, String],
-      default: 1200
-    },
-    y: {
-      type: Number,
-      default: 200
-    },
-    scroll: {
-      type: Object
-    },
-    rowSelection: {
-      type: Object
-    },
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    pageSize: {
-      type: [Number, String],
-      default: 10
-    },
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '20', '30', '40']
-    },
-    bordered: {
-      type: Boolean,
-      default: true
-    },
-    countLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      tableHeaderHeight: 0,
-      paginationHeight: 0,
-      innerPageSize: 10,
-      innerCurrentPage: 1,
-      tableContentHeight: 0,
-      obs: [],
-      // 容器宽度，用于智能判断是否需要 fixed 列
-      containerWidth: 0,
-      // 用于强制重新渲染表格（当 fixed 列状态切换时）
-      tableRenderKey: 0
-    }
-  },
-  computed: {
-    wrapperStyle () {
-      // 外层容器样式
-      if (!this.height) return {}
-      return { height: `${this.height}px` }
-    },
-    needScrollY () {
-      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估
-      if (!this.height) return false
-      
-      const availableHeight = this.getScrollHeightByHeight
-      if (availableHeight <= 0) return false
-      
-      // 预估每行高度（包含边框），antd 默认约 54px
-      const estimatedRowHeight = 54
-      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight
-      
-      return estimatedTableHeight > availableHeight
-    },
-    innerColumns () {
-      return this.columns.filter(col => !Object.keys(col).includes('multiple'))
-    },
-    isNoData () {
-      return !this.dataSource.length
-    },
-    getScrollHeightByHeight () {
-      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
-      return this.height - this.tableHeaderHeight - this.paginationHeight
-    },
-    isFlexColumn () {
-      return this.columns.every(col => !col.width)
-    },
-    /**
-     * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）
-     */
-    totalColumnsWidth () {
-      const cols = this.innerColumns || []
-      let total = cols.reduce((sum, col) => {
-        const w = col && col.width
-        return sum + (typeof w === 'number' ? w : 0)
-      }, 0)
-      // rowSelection 的 checkbox/radio 列，antd 默认约 60px
-      if (this.rowSelection) total += 60
-      // 操作列（operations）的宽度
-      if (this.operations && this.operations.width && typeof this.operations.width === 'number') {
-        total += this.operations.width
-      }
-      return total
-    },
-    /**
-     * 是否需要横向滚动：容器宽度 < 列总宽度
-     */
-    needHorizontalScroll () {
-      // 未获取容器宽度前，先假定需要滚动（保守策略）
-      if (!this.containerWidth) return true
-      // 加一点容差
-      return this.containerWidth < this.totalColumnsWidth - 5
-    },
-    /**
-     * 智能列配置：
-     * - 当需要横向滚动时，保留原始 fixed 属性
-     * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满
-     */
-    smartColumns () {
-      if (this.needHorizontalScroll) {
-        // 需要滚动，保留原始配置
-        return this.innerColumns
-      }
-      // 不需要滚动，移除所有 fixed 属性
-      return this.innerColumns.map(col => {
-        if (col.fixed) {
-          const { fixed, ...rest } = col
-          return rest
-        }
-        return col
-      })
-    },
-    /**
-     * 智能 scroll 配置：
-     * - 当需要横向滚动时，设置 scroll.x
-     * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域
-     */
-    smartScroll () {
-      if (!this.needHorizontalScroll) {
-        // 不需要横向滚动，只保留 y 方向（如果需要）
-        if (this.height && this.needScrollY) {
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
-            ? this.getScrollHeightByHeight 
-            : this.height - 100
-          if (availableHeight > 50) {
-            return { y: availableHeight }
-          }
-        }
-        return {}
-      }
-      // 需要横向滚动，使用原有逻辑
-      return this.getScroll
-    },
-    /**
-     * 智能 rowSelection 配置：
-     * - 当需要横向滚动时，保留原始 fixed 属性
-     * - 当容器足够宽时，移除 fixed 属性
-     */
-    smartRowSelection () {
-      if (!this.rowSelection) return null
-      if (this.needHorizontalScroll) {
-        return this.rowSelection
-      }
-      // 不需要滚动，移除 fixed 属性
-      if (this.rowSelection.fixed) {
-        const { fixed, ...rest } = this.rowSelection
-        return rest
-      }
-      return this.rowSelection
-    },
-    getScroll () {
-      if (this.scroll) {
-        return this.scroll
-      } else {
-        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
-        let baseX = (this.x === '' || this.x === null || this.x === undefined) ? 1200 : this.x
-
-        // 解决“x 给太大导致操作列前出现大块空白”的问题：
-        // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。
-        if (typeof baseX === 'number') {
-          const cols = this.innerColumns || []
-          const total = cols.reduce((sum, col) => {
-            const w = col && col.width
-            return sum + (typeof w === 'number' ? w : 0)
-          }, 0)
-
-          // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差
-          const selectionWidth = this.rowSelection ? 60 : 0
-
-          // 只有当所有列都明确给了宽度（total > 0）时才 clamp
-          if (total > 0) {
-            const minX = total + selectionWidth
-            if (baseX > minX) baseX = minX
-          }
-        }
-        
-        if (this.height && this.needScrollY) {
-          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
-            ? this.getScrollHeightByHeight 
-            : this.height - 100
-          
-          if (availableHeight > 50) {
-            return { x: baseX, y: availableHeight }
-          }
-        }
-        return { x: baseX }
-      }
-    }
-  },
-  watch: {
-    pageSize: {
-      handler (pageSize) {
-        this.innerPageSize = pageSize
-      },
-      immediate: true
-    },
-    /**
-     * 监听 needHorizontalScroll 变化，强制重新渲染表格
-     * 当从"需要固定列"切换到"不需要固定列"或反之时，antd 的 a-table 需要完全重新渲染
-     */
-    needHorizontalScroll (newVal, oldVal) {
-      if (newVal !== oldVal) {
-        // 更新 key 强制 Vue 销毁并重建 a-table 组件
-        this.tableRenderKey++
-        // 使用重试机制确保固定列完全渲染
-        this.$nextTick(() => {
-          this.retrySyncFixedColumns(newVal)
-        })
-      }
-    }
-  },
-  methods: {
-    onShowSizeChange (current, pageSize) {
-      this.innerCurrentPage = current
-      this.innerPageSize = pageSize
-      this.$emit('change-page', current, pageSize)
-    },
-    setPaginationHeight () {
-      this.$nextTick(() => {
-        const el = this.$el.querySelector('.g-table__pagination')
-        if (el) {
-          const { height } = el.getBoundingClientRect()
-          this.paginationHeight = height
-        }
-      })
-    },
-    setTableHeaderHeight () {
-      this.$nextTick(() => {
-        const el = this.$el.querySelector('.ant-table-header')
-        if (!el) return
-        const { height } = el.getBoundingClientRect()
-        this.tableHeaderHeight = height
-      })
-    },
-    setTableTbodyHeight () {
-      this.$nextTick(() => {
-        this.setTableHeaderHeight()
-      })
-    },
-    setRowClassName (record, idx) {
-      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
-    },
-    onChangePagination (page, pageSize) {
-      this.innerCurrentPage = page
-      this.innerPageSize = pageSize
-      this.$emit('change-page', page, pageSize)
-    },
-    syncFixedColumns () {
-      // 强制 ant-design-vue 重新计算固定列的宽度
-      this.$nextTick(() => {
-        const tableEl = this.$el.querySelector('.ant-table')
-        if (tableEl) {
-          // 触发窗口 resize 事件，让 ant-design-vue 重新计算
-          window.dispatchEvent(new Event('resize'))
-        }
-      })
-    },
-    /**
-     * 带重试的固定列同步机制
-     * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，
-     * 这里通过重试确保固定列渲染完成后再同步。
-     * @param {boolean} needFixed - 是否需要固定列
-     * @param {number} retries - 当前重试次数
-     */
-    retrySyncFixedColumns (needFixed, retries = 0) {
-      const MAX_RETRIES = 5
-      const DELAY = 100 // 每次延迟 100ms
-
-      setTimeout(() => {
-        this.syncFixedColumns()
-        this.syncHeaderTableWidth()
-        this.bindScrollSync()
-
-        // 如果需要固定列，检查是否已渲染
-        if (needFixed && retries < MAX_RETRIES) {
-          const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr')
-          const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr')
-          
-          // 如果有固定列配置但还没渲染出来，继续重试
-          const hasFixedConfig = this.innerColumns.some(c => c.fixed) || (this.rowSelection && this.rowSelection.fixed)
-          if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {
-            this.retrySyncFixedColumns(needFixed, retries + 1)
-          }
-        }
-      }, DELAY)
-    },
-    /**
-     * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。
-     * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，
-     *       header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就"滚不动"。
-     * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。
-     */
-    syncHeaderTableWidth () {
-      this.$nextTick(() => {
-        const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table')
-        const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table')
-        if (!headerTable || !bodyTable) return
-
-        const bodyW = bodyTable.getBoundingClientRect().width
-        const headerW = headerTable.getBoundingClientRect().width
-
-        // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应
-        // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式
-        if (Math.abs(bodyW - headerW) > 2) {
-          headerTable.style.width = `${bodyW}px`
-          headerTable.style.minWidth = `${bodyW}px`
-        }
-      })
-    },
-    /**
-     * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）
-     */
-    bindScrollSync () {
-      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')
-      const header = this.$el.querySelector('.ant-table-scroll .ant-table-header')
-      if (!body || !header) return
-
-      if (this._scrollHandler) return // 已绑定
-      this._scrollHandler = () => {
-        header.scrollLeft = body.scrollLeft
-      }
-      body.addEventListener('scroll', this._scrollHandler, { passive: true })
-    },
-    unbindScrollSync () {
-      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')
-      if (body && this._scrollHandler) {
-        body.removeEventListener('scroll', this._scrollHandler)
-        this._scrollHandler = null
-      }
-    },
-    /**
-     * 测量容器宽度
-     */
-    measureContainerWidth () {
-      const wrapper = this.$refs.tableWrapper
-      if (wrapper) {
-        this.containerWidth = wrapper.clientWidth
-      }
-    },
-    /**
-     * 使用 ResizeObserver 监听容器宽度变化
-     */
-    observeContainerWidth () {
-      const wrapper = this.$refs.tableWrapper
-      if (!wrapper || typeof ResizeObserver === 'undefined') return
-
-      if (this._containerResizeObserver) return // 已绑定
-
-      this._containerResizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const newWidth = entry.contentRect.width
-          // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染
-          if (Math.abs(newWidth - this.containerWidth) > 10) {
-            const oldNeedScroll = this.needHorizontalScroll
-            this.containerWidth = newWidth
-            // 容器宽度变化会触发 needHorizontalScroll 的重新计算
-            // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步
-            // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突
-            // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度
-            // 确保窗口变大/变小时表头都能及时响应
-            this.$nextTick(() => {
-              // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度
-              // 这样能确保表体宽度已经更新完成
-              requestAnimationFrame(() => {
-                this.syncHeaderTableWidth()
-              })
-              
-              // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步
-              // 如果状态变化了，watcher 会处理重新渲染
-              if (this.needHorizontalScroll === oldNeedScroll) {
-                // 防抖：延迟同步固定列，避免频繁调用
-                if (this._resizeDebounceTimer) {
-                  clearTimeout(this._resizeDebounceTimer)
-                }
-                this._resizeDebounceTimer = setTimeout(() => {
-                  this.syncFixedColumns()
-                  this.syncHeaderTableWidth()
-                  this.bindScrollSync()
-                }, 150)
-              }
-            })
-          }
-        }
-      })
-      this._containerResizeObserver.observe(wrapper)
-    },
-    /**
-     * 断开容器宽度监听
-     */
-    unobserveContainerWidth () {
-      if (this._containerResizeObserver) {
-        this._containerResizeObserver.disconnect()
-        this._containerResizeObserver = null
-      }
-      // 清理防抖定时器
-      if (this._resizeDebounceTimer) {
-        clearTimeout(this._resizeDebounceTimer)
-        this._resizeDebounceTimer = null
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      // 先测量容器宽度，用于智能判断是否需要 fixed 列
-      this.measureContainerWidth()
-      this.observeContainerWidth()
-
-      this.setPaginationHeight()
-      setTimeout(() => {
-        this.setTableTbodyHeight()
-        this.setPaginationHeight()
-        // 强制同步固定列和主表的列宽
-        this.syncFixedColumns()
-        // 同步表头 table 宽度（修复 max-content 场景）
-        this.syncHeaderTableWidth()
-        // 绑定横向滚动同步
-        this.bindScrollSync()
-      }, 200)
-    })
-    
-    // 监听数据变化，重新同步列宽
-    this.$watch('dataSource', () => {
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.syncFixedColumns()
-          this.syncHeaderTableWidth()
-          this.bindScrollSync()
-        }, 100)
-      })
-    }, { deep: true })
-  },
-  destroyed () {
-    this.obs.forEach(ob => ob.disconnect())
-    this.unbindScrollSync()
-    this.unobserveContainerWidth()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.g-table__wrapper {
-  /**
-   * 修复"宽屏下表格两侧出现空白"问题：
-   * 当视口宽度大于表格内容宽度时，主表(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%;
-  }
-
-  /**
-   * 修复"固定列 + scroll.x"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。
-   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为"操作列前多了一大块空白/空列"。
-   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。
-   */
-  ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,
-  ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {
-    visibility: hidden;
-  }
-
-  /* 强制统一行高，确保主表和固定列对齐 */
-  ::v-deep .ant-table-tbody > tr > td {
-    height: 54px;
-    padding: 8px 16px;
-    vertical-align: middle;
-    box-sizing: border-box;
-    line-height: 38px;
-  }
-
-  /* 表头也统一高度和样式 */
-  ::v-deep .ant-table-thead > tr > th {
-    height: 54px;
-    padding: 8px 16px;
-    vertical-align: middle;
-    box-sizing: border-box;
-    line-height: 38px;
-  }
-
-  /* 分页区域固定在底部 */
-  .g-table__pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    border-top: unset;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    background: #fff;
-  }
-
-  /* 空数据状态顶部显示 */
-  .g-table__no-data {
-    position: relative;
-    ::v-deep .ant-table-placeholder {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -40%);
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      color: #999;
-      font-size: 14px;
-      font-weight: normal;
-      line-height: 20px;
-      overflow: hidden;
-      border: unset;
-    }
-  }
-}
+<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"
+      :locale="{ emptyText: '暂无数据' }">
+      <template slot="action" slot-scope="record">
+        <Actions v-on="$listeners" :data-source="actions" :record="record"></Actions>
+      </template>
+    </a-table>
+    <div class="g-table__pagination">
+      <a-pagination
+        :show-total="all => `共 ${all} 条数据`"
+        v-if="mode === 'default'"
+        show-size-changer 
+        show-quick-jumper
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
+        :pageSizeOptions="pageSizeOptions"
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
+        :total="total">
+      </a-pagination>
+      <ele-pagination
+        v-else
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
+        :pageSizeOptions="pageSizeOptions"
+        :data="dataSource"
+        :loading="countLoading"
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
+        :total="total"
+      ></ele-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Actions from './action.vue'
+export default {
+  name: 'ele-table',
+  components: {
+    Actions
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'next-cursor'].includes(value)
+      }
+    },
+    // ant table wrapper
+    height: {
+      type: Number
+    },
+    width: {
+      type: Number
+    },
+    x: {
+      // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）
+      type: [Number, String],
+      default: 1200
+    },
+    y: {
+      type: Number,
+      default: 200
+    },
+    scroll: {
+      type: Object
+    },
+    rowSelection: {
+      type: Object
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    pageSize: {
+      type: [Number, String],
+      default: 10
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '20', '30', '40']
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    countLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      tableHeaderHeight: 0,
+      paginationHeight: 0,
+      innerPageSize: 10,
+      innerCurrentPage: 1,
+      tableContentHeight: 0,
+      obs: [],
+      // 容器宽度，用于智能判断是否需要 fixed 列
+      containerWidth: 0,
+      // 用于强制重新渲染表格（当 fixed 列状态切换时）
+      tableRenderKey: 0
+    }
+  },
+  computed: {
+    wrapperStyle () {
+      // 外层容器样式
+      if (!this.height) return {}
+      return { height: `${this.height}px` }
+    },
+    needScrollY () {
+      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估
+      if (!this.height) return false
+      
+      const availableHeight = this.getScrollHeightByHeight
+      if (availableHeight <= 0) return false
+      
+      // 无数据时也需设置 scroll.y，使表格体有高度，否则“暂无数据”占位区域会塌陷无法正常显示
+      if (!this.dataSource.length) return true
+      
+      // 预估每行高度（包含边框），antd 默认约 54px
+      const estimatedRowHeight = 54
+      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight
+      
+      return estimatedTableHeight > availableHeight
+    },
+    innerColumns () {
+      return this.columns.filter(col => !Object.keys(col).includes('multiple'))
+    },
+    isNoData () {
+      return !this.dataSource.length
+    },
+    getScrollHeightByHeight () {
+      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器
+      return this.height - this.tableHeaderHeight - this.paginationHeight
+    },
+    isFlexColumn () {
+      return this.columns.every(col => !col.width)
+    },
+    /**
+     * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）
+     */
+    totalColumnsWidth () {
+      const cols = this.innerColumns || []
+      let total = cols.reduce((sum, col) => {
+        const w = col && col.width
+        return sum + (typeof w === 'number' ? w : 0)
+      }, 0)
+      // rowSelection 的 checkbox/radio 列，antd 默认约 60px
+      if (this.rowSelection) total += 60
+      // 操作列（operations）的宽度
+      if (this.operations && this.operations.width && typeof this.operations.width === 'number') {
+        total += this.operations.width
+      }
+      return total
+    },
+    /**
+     * 是否需要横向滚动：容器宽度 < 列总宽度
+     */
+    needHorizontalScroll () {
+      // 未获取容器宽度前，先假定需要滚动（保守策略）
+      if (!this.containerWidth) return true
+      // 加一点容差
+      return this.containerWidth < this.totalColumnsWidth - 5
+    },
+    /**
+     * 智能列配置：
+     * - 当需要横向滚动时，保留原始 fixed 属性
+     * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满
+     */
+    smartColumns () {
+      if (this.needHorizontalScroll) {
+        // 需要滚动，保留原始配置
+        return this.innerColumns
+      }
+      // 不需要滚动，移除所有 fixed 属性
+      return this.innerColumns.map(col => {
+        if (col.fixed) {
+          const { fixed, ...rest } = col
+          return rest
+        }
+        return col
+      })
+    },
+    /**
+     * 智能 scroll 配置：
+     * - 当需要横向滚动时，设置 scroll.x
+     * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域
+     */
+    smartScroll () {
+      if (!this.needHorizontalScroll) {
+        // 不需要横向滚动，只保留 y 方向（如果需要）
+        if (this.height && this.needScrollY) {
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
+            ? this.getScrollHeightByHeight 
+            : this.height - 100
+          if (availableHeight > 50) {
+            return { y: availableHeight }
+          }
+        }
+        return {}
+      }
+      // 需要横向滚动，使用原有逻辑
+      return this.getScroll
+    },
+    /**
+     * 智能 rowSelection 配置：
+     * - 当需要横向滚动时，保留原始 fixed 属性
+     * - 当容器足够宽时，移除 fixed 属性
+     */
+    smartRowSelection () {
+      if (!this.rowSelection) return null
+      if (this.needHorizontalScroll) {
+        return this.rowSelection
+      }
+      // 不需要滚动，移除 fixed 属性
+      if (this.rowSelection.fixed) {
+        const { fixed, ...rest } = this.rowSelection
+        return rest
+      }
+      return this.rowSelection
+    },
+    getScroll () {
+      if (this.scroll) {
+        return this.scroll
+      } else {
+        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
+        let baseX = (this.x === '' || this.x === null || this.x === undefined) ? 1200 : this.x
+
+        // 解决“x 给太大导致操作列前出现大块空白”的问题：
+        // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。
+        if (typeof baseX === 'number') {
+          const cols = this.innerColumns || []
+          const total = cols.reduce((sum, col) => {
+            const w = col && col.width
+            return sum + (typeof w === 'number' ? w : 0)
+          }, 0)
+
+          // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差
+          const selectionWidth = this.rowSelection ? 60 : 0
+
+          // 只有当所有列都明确给了宽度（total > 0）时才 clamp
+          if (total > 0) {
+            const minX = total + selectionWidth
+            if (baseX > minX) baseX = minX
+          }
+        }
+        
+        if (this.height && this.needScrollY) {
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight 
+            ? this.getScrollHeightByHeight 
+            : this.height - 100
+          
+          if (availableHeight > 50) {
+            return { x: baseX, y: availableHeight }
+          }
+        }
+        return { x: baseX }
+      }
+    }
+  },
+  watch: {
+    pageSize: {
+      handler (pageSize) {
+        this.innerPageSize = pageSize
+      },
+      immediate: true
+    },
+    /**
+     * 监听 needHorizontalScroll 变化，强制重新渲染表格
+     * 当从"需要固定列"切换到"不需要固定列"或反之时，antd 的 a-table 需要完全重新渲染
+     */
+    needHorizontalScroll (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // 更新 key 强制 Vue 销毁并重建 a-table 组件
+        this.tableRenderKey++
+        // 使用重试机制确保固定列完全渲染
+        this.$nextTick(() => {
+          this.retrySyncFixedColumns(newVal)
+        })
+      }
+    }
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      this.innerCurrentPage = current
+      this.innerPageSize = pageSize
+      this.$emit('change-page', current, pageSize)
+    },
+    setPaginationHeight () {
+      this.$nextTick(() => {
+        const el = this.$el.querySelector('.g-table__pagination')
+        if (el) {
+          const { height } = el.getBoundingClientRect()
+          this.paginationHeight = height
+        }
+      })
+    },
+    setTableHeaderHeight () {
+      this.$nextTick(() => {
+        const el = this.$el.querySelector('.ant-table-header')
+        if (!el) return
+        const { height } = el.getBoundingClientRect()
+        this.tableHeaderHeight = height
+      })
+    },
+    setTableTbodyHeight () {
+      this.$nextTick(() => {
+        this.setTableHeaderHeight()
+      })
+    },
+    setRowClassName (record, idx) {
+      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
+    },
+    onChangePagination (page, pageSize) {
+      this.innerCurrentPage = page
+      this.innerPageSize = pageSize
+      this.$emit('change-page', page, pageSize)
+    },
+    syncFixedColumns () {
+      // 强制 ant-design-vue 重新计算固定列的宽度
+      this.$nextTick(() => {
+        const tableEl = this.$el.querySelector('.ant-table')
+        if (tableEl) {
+          // 触发窗口 resize 事件，让 ant-design-vue 重新计算
+          window.dispatchEvent(new Event('resize'))
+        }
+      })
+    },
+    /**
+     * 带重试的固定列同步机制
+     * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，
+     * 这里通过重试确保固定列渲染完成后再同步。
+     * @param {boolean} needFixed - 是否需要固定列
+     * @param {number} retries - 当前重试次数
+     */
+    retrySyncFixedColumns (needFixed, retries = 0) {
+      const MAX_RETRIES = 5
+      const DELAY = 100 // 每次延迟 100ms
+
+      setTimeout(() => {
+        this.syncFixedColumns()
+        this.syncHeaderTableWidth()
+        this.bindScrollSync()
+
+        // 如果需要固定列，检查是否已渲染
+        if (needFixed && retries < MAX_RETRIES) {
+          const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr')
+          const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr')
+          
+          // 如果有固定列配置但还没渲染出来，继续重试
+          const hasFixedConfig = this.innerColumns.some(c => c.fixed) || (this.rowSelection && this.rowSelection.fixed)
+          if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {
+            this.retrySyncFixedColumns(needFixed, retries + 1)
+          }
+        }
+      }, DELAY)
+    },
+    /**
+     * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。
+     * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，
+     *       header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就"滚不动"。
+     * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。
+     */
+    syncHeaderTableWidth () {
+      this.$nextTick(() => {
+        const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table')
+        const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table')
+        if (!headerTable || !bodyTable) return
+
+        const bodyW = bodyTable.getBoundingClientRect().width
+        const headerW = headerTable.getBoundingClientRect().width
+
+        // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应
+        // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式
+        if (Math.abs(bodyW - headerW) > 2) {
+          headerTable.style.width = `${bodyW}px`
+          headerTable.style.minWidth = `${bodyW}px`
+        }
+      })
+    },
+    /**
+     * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）
+     */
+    bindScrollSync () {
+      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')
+      const header = this.$el.querySelector('.ant-table-scroll .ant-table-header')
+      if (!body || !header) return
+
+      if (this._scrollHandler) return // 已绑定
+      this._scrollHandler = () => {
+        header.scrollLeft = body.scrollLeft
+      }
+      body.addEventListener('scroll', this._scrollHandler, { passive: true })
+    },
+    unbindScrollSync () {
+      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')
+      if (body && this._scrollHandler) {
+        body.removeEventListener('scroll', this._scrollHandler)
+        this._scrollHandler = null
+      }
+    },
+    /**
+     * 测量容器宽度
+     */
+    measureContainerWidth () {
+      const wrapper = this.$refs.tableWrapper
+      if (wrapper) {
+        this.containerWidth = wrapper.clientWidth
+      }
+    },
+    /**
+     * 使用 ResizeObserver 监听容器宽度变化
+     */
+    observeContainerWidth () {
+      const wrapper = this.$refs.tableWrapper
+      if (!wrapper || typeof ResizeObserver === 'undefined') return
+
+      if (this._containerResizeObserver) return // 已绑定
+
+      this._containerResizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const newWidth = entry.contentRect.width
+          // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染
+          if (Math.abs(newWidth - this.containerWidth) > 10) {
+            const oldNeedScroll = this.needHorizontalScroll
+            this.containerWidth = newWidth
+            // 容器宽度变化会触发 needHorizontalScroll 的重新计算
+            // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步
+            // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突
+            // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度
+            // 确保窗口变大/变小时表头都能及时响应
+            this.$nextTick(() => {
+              // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度
+              // 这样能确保表体宽度已经更新完成
+              requestAnimationFrame(() => {
+                this.syncHeaderTableWidth()
+              })
+              
+              // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步
+              // 如果状态变化了，watcher 会处理重新渲染
+              if (this.needHorizontalScroll === oldNeedScroll) {
+                // 防抖：延迟同步固定列，避免频繁调用
+                if (this._resizeDebounceTimer) {
+                  clearTimeout(this._resizeDebounceTimer)
+                }
+                this._resizeDebounceTimer = setTimeout(() => {
+                  this.syncFixedColumns()
+                  this.syncHeaderTableWidth()
+                  this.bindScrollSync()
+                }, 150)
+              }
+            })
+          }
+        }
+      })
+      this._containerResizeObserver.observe(wrapper)
+    },
+    /**
+     * 断开容器宽度监听
+     */
+    unobserveContainerWidth () {
+      if (this._containerResizeObserver) {
+        this._containerResizeObserver.disconnect()
+        this._containerResizeObserver = null
+      }
+      // 清理防抖定时器
+      if (this._resizeDebounceTimer) {
+        clearTimeout(this._resizeDebounceTimer)
+        this._resizeDebounceTimer = null
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 先测量容器宽度，用于智能判断是否需要 fixed 列
+      this.measureContainerWidth()
+      this.observeContainerWidth()
+
+      this.setPaginationHeight()
+      setTimeout(() => {
+        this.setTableTbodyHeight()
+        this.setPaginationHeight()
+        // 强制同步固定列和主表的列宽
+        this.syncFixedColumns()
+        // 同步表头 table 宽度（修复 max-content 场景）
+        this.syncHeaderTableWidth()
+        // 绑定横向滚动同步
+        this.bindScrollSync()
+      }, 200)
+    })
+    
+    // 监听数据变化，重新同步列宽
+    this.$watch('dataSource', () => {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.syncFixedColumns()
+          this.syncHeaderTableWidth()
+          this.bindScrollSync()
+        }, 100)
+      })
+    }, { deep: true })
+  },
+  destroyed () {
+    this.obs.forEach(ob => ob.disconnect())
+    this.unbindScrollSync()
+    this.unobserveContainerWidth()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-table__wrapper {
+  display: flex;
+  flex-direction: column;
+  /* 表格区域占据剩余空间并可滚动，分页始终在底部可见 */
+  & > *:first-child {
+    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%;
+  }
+
+  /**
+   * 修复"固定列 + scroll.x"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。
+   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为"操作列前多了一大块空白/空列"。
+   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。
+   */
+  ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,
+  ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {
+    visibility: hidden;
+  }
+
+  /* 强制统一行高，确保主表和固定列对齐 */
+  ::v-deep .ant-table-tbody > tr > td {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
+    line-height: 38px;
+  }
+
+  /* 表头也统一高度和样式 */
+  ::v-deep .ant-table-thead > tr > th {
+    height: 54px;
+    padding: 8px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
+    line-height: 38px;
+  }
+
+  /* 分页区域固定在底部，不被挤出视口 */
+  .g-table__pagination {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    border-top: unset;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background: #fff;
+  }
+
+  /* 空数据状态：使用表格内置“暂无数据”，保留表头 + 占位行，不覆盖、不绝对定位 */
+  .g-table__no-data {
+    ::v-deep .ant-table-placeholder {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 14px;
+    }
+  }
+}
 </style>