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

package/dist/@idooel/components.esm.js

@@ -1951,6 +1951,7 @@ var __vue_render__$C = function () {
           bordered: _vm.bordered,
           pagination: false,
           loading: _vm.loading,
+          size: "middle",
           columns: _vm.innerColumns,
           "row-selection": _vm.rowSelection,
           "row-class-name": _vm.setRowClassName,
@@ -2009,11 +2010,11 @@ __vue_render__$C._withStripped = true;
   /* style */
   const __vue_inject_styles__$C = function (inject) {
     if (!inject) return
-    inject("data-v-7943901f_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-7943901f] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination[data-v-7943901f] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACwNhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;EA6BA,iBAAA;EA6CA,qBAAA;AD/RA;ACsNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADpNA;ACuNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADrNA;ACwNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADtNA;ACyNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADvNA;AC2NA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;ADzNA;AC4NA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD1NA;AC6NA;EACA,cAAA;EACA,gBAAA;AD3NA;ACiOA;EACA,0DAAA;AD/NA;ACiOA;EACA,0DAAA;AD/NA;ACkOA;EACA,6CAAA;ADhOA;ACkOA;EACA,6CAAA;ADhOA;ACsOA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADpOA;ACwOA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADtOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\n    <a-table\n      :bordered=\"bordered\"\n      :class=\"[isNoData && 'g-table__no-data']\"\n      :pagination=\"false\"\n      :loading=\"loading\"\n      :columns=\"innerColumns\"\n      :row-selection=\"rowSelection\"\n      :row-class-name=\"setRowClassName\"\n      :data-source=\"dataSource\"\n      :scroll=\"getScroll\">\n      <template slot=\"action\" slot-scope=\"record\">\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n      </template>\n    </a-table>\n    <div class=\"g-table__pagination\">\n      <a-pagination\n        :show-total=\"all => `共 ${all} 条数据`\"\n        show-size-changer \n        show-quick-jumper\n        :pageSize=\"innerPageSize\"\n        :current=\"innerCurrentPage\"\n        :pageSizeOptions=\"pageSizeOptions\"\n        @change=\"onChangePagination\"\n        @showSizeChange=\"onShowSizeChange\"\n        :total=\"total\">\n      </a-pagination>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n  name: 'ele-table',\n  components: {\n    Actions\n  },\n  props: {\n    // ant table wrapper\n    height: {\n      type: Number\n    },\n    width: {\n      type: Number\n    },\n    x: {\n      type: Number,\n      default: 1200\n    },\n    y: {\n      type: Number,\n      default: 200\n    },\n    scroll: {\n      type: Object\n    },\n    rowSelection: {\n      type: Object\n    },\n    actions: {\n      type: Array,\n      default: () => []\n    },\n    total: {\n      type: Number,\n      default: 0\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    columns: {\n      type: Array,\n      default: () => []\n    },\n    dataSource: {\n      type: Array,\n      default: () => []\n    },\n    pageSize: {\n      type: Number,\n      default: 10\n    },\n    pageSizeOptions: {\n      type: Array,\n      default: () => ['10', '20', '30', '40']\n    },\n    bordered: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      tableHeaderHeight: 0,\n      paginationHeight: 0,\n      innerPageSize: 10,\n      innerCurrentPage: 1,\n      tableContentHeight: 0,\n      obs: []\n    }\n  },\n  computed: {\n    wrapperStyle () {\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\n      if (!this.height) return {}\n      return { height: `${this.height}px` }\n    },\n    needScrollY () {\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\n      if (!this.height) return false\n      \n      const availableHeight = this.getScrollHeightByHeight\n      if (availableHeight <= 0) return false\n      \n      // 预估每行高度（包含边框），antd 默认约 54px\n      const estimatedRowHeight = 54\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n      \n      return estimatedTableHeight > availableHeight\n    },\n    innerColumns () {\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n    },\n    isNoData () {\n      return !this.dataSource.length\n    },\n    getScrollHeightByHeight () {\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\n      return this.height - this.tableHeaderHeight - this.paginationHeight\n    },\n    isFlexColumn () {\n      return this.columns.every(col => !col.width)\n    },\n    getScroll () {\n      if (this.scroll) {\n        return this.scroll\n      } else {\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\n        if (this.height) {\n          // 计算表体可用高度\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \n            ? this.getScrollHeightByHeight \n            : this.height - 100 // 预估值，给表头和分页留空间\n          \n          if (availableHeight > 50) { // 确保有足够的最小高度\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\n            return { x: baseX, y: availableHeight }\n          }\n        }\n        return { x: baseX }\n      }\n    }\n  },\n  watch: {\n    pageSize: {\n      handler (pageSize) {\n        this.innerPageSize = pageSize\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    onShowSizeChange (current, pageSize) {\n      this.innerCurrentPage = current\n      this.innerPageSize = pageSize\n      this.$emit('change-page', current, pageSize)\n    },\n    setPaginationHeight () {\n      this.$nextTick(() => {\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\n        this.paginationHeight = height\n      })\n    },\n    setTableHeaderHeight () {\n      this.$nextTick(() => {\n        const el = document.querySelector('.ant-table-header')\n        if (!el) return\n        const { height } = el.getBoundingClientRect()\n        this.tableHeaderHeight = height\n      })\n    },\n    setTableTbodyHeight () {\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\n      this.$nextTick(() => {\n        this.setTableHeaderHeight()\n      })\n    },\n    setRowClassName (record, idx) {\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n    },\n    onChangePagination (page, pageSize) {\n      this.innerCurrentPage = page\n      this.innerPageSize = pageSize\n      this.$emit('change-page', page, pageSize)\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.setPaginationHeight()\n      setTimeout(() => {\n        this.setTableTbodyHeight()\n        // 再测一次分页高度，确保初次渲染完成后数值准确\n        this.setPaginationHeight()\n      }, 200)\n    })\n  },\n  destroyed () {\n    this.obs.forEach(ob => ob.disconnect())\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  ::v-deep .ant-table-wrapper {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-nested-loading {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-container {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* 确保表体能够正常纵向滚动 */\n  ::v-deep .ant-table-content {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  ::v-deep .ant-table-scroll {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table-header {\n    flex: 0 0 auto;\n    overflow: hidden;\n  }\n  ::v-deep .ant-table-fixed {\n    .ant-table-tbody {\n      .g-table__row--odd {\n        &.ant-table-row-hover {\n          .ant-table-selection-column {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n          .ant-table-row-cell-break-word {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n        }\n        .ant-table-selection-column {\n          background-color: var(--idooel-row-odd-color);\n        }\n        .ant-table-row-cell-break-word {\n          background-color: var(--idooel-row-odd-color);\n        }\n      }\n    }\n  }\n\n  ::v-deep .ant-table-body {\n    flex: 1 1 auto;\n    overflow: auto !important;\n    /* 确保滚动条稳定，避免列宽抖动 */\n    scrollbar-gutter: stable;\n  }\n\n  /* 分页区域固定在底部，不被挤出视口 */\n  .g-table__pagination {\n    flex: 0 0 auto;\n    display: flex;\n    flex-direction: row;\n    justify-content: end;\n    border-top: unset;\n    padding-top: 8px;\n    padding-bottom: 8px;\n    background: #fff;\n    z-index: 999;\n  }\n}\n</style>"]}, media: undefined });
+    inject("data-v-3f1790f0_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-3f1790f0] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination[data-v-3f1790f0] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACyNhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;EA6BA,iBAAA;EAsDA,qBAAA;ADzSA;ACuNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADrNA;ACwNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADtNA;ACyNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADvNA;AC0NA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADxNA;AC4NA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD1NA;AC6NA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD3NA;AC8NA;EACA,cAAA;EACA,gBAAA;AD5NA;ACkOA;EACA,+CAAA;ADhOA;ACkOA;EACA,0DAAA;ADhOA;ACkOA;EACA,0DAAA;ADhOA;ACmOA;EACA,6CAAA;ADjOA;ACmOA;EACA,wDAAA;ADjOA;ACmOA;EACA,wDAAA;ADjOA;ACqOA;EACA,0CAAA;ADnOA;ACuOA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADrOA;ACyOA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\n    <a-table\n      :bordered=\"bordered\"\n      :class=\"[isNoData && 'g-table__no-data']\"\n      :pagination=\"false\"\n      :loading=\"loading\"\n      size=\"middle\"\n      :columns=\"innerColumns\"\n      :row-selection=\"rowSelection\"\n      :row-class-name=\"setRowClassName\"\n      :data-source=\"dataSource\"\n      :scroll=\"getScroll\">\n      <template slot=\"action\" slot-scope=\"record\">\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n      </template>\n    </a-table>\n    <div class=\"g-table__pagination\">\n      <a-pagination\n        :show-total=\"all => `共 ${all} 条数据`\"\n        show-size-changer \n        show-quick-jumper\n        :pageSize=\"innerPageSize\"\n        :current=\"innerCurrentPage\"\n        :pageSizeOptions=\"pageSizeOptions\"\n        @change=\"onChangePagination\"\n        @showSizeChange=\"onShowSizeChange\"\n        :total=\"total\">\n      </a-pagination>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n  name: 'ele-table',\n  components: {\n    Actions\n  },\n  props: {\n    // ant table wrapper\n    height: {\n      type: Number\n    },\n    width: {\n      type: Number\n    },\n    x: {\n      type: Number,\n      default: 1200\n    },\n    y: {\n      type: Number,\n      default: 200\n    },\n    scroll: {\n      type: Object\n    },\n    rowSelection: {\n      type: Object\n    },\n    actions: {\n      type: Array,\n      default: () => []\n    },\n    total: {\n      type: Number,\n      default: 0\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    columns: {\n      type: Array,\n      default: () => []\n    },\n    dataSource: {\n      type: Array,\n      default: () => []\n    },\n    pageSize: {\n      type: Number,\n      default: 10\n    },\n    pageSizeOptions: {\n      type: Array,\n      default: () => ['10', '20', '30', '40']\n    },\n    bordered: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      tableHeaderHeight: 0,\n      paginationHeight: 0,\n      innerPageSize: 10,\n      innerCurrentPage: 1,\n      tableContentHeight: 0,\n      obs: []\n    }\n  },\n  computed: {\n    wrapperStyle () {\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\n      if (!this.height) return {}\n      return { height: `${this.height}px` }\n    },\n    needScrollY () {\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\n      if (!this.height) return false\n      \n      const availableHeight = this.getScrollHeightByHeight\n      if (availableHeight <= 0) return false\n      \n      // 预估每行高度（包含边框），antd 默认约 54px\n      const estimatedRowHeight = 54\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n      \n      return estimatedTableHeight > availableHeight\n    },\n    innerColumns () {\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n    },\n    isNoData () {\n      return !this.dataSource.length\n    },\n    getScrollHeightByHeight () {\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\n      return this.height - this.tableHeaderHeight - this.paginationHeight\n    },\n    isFlexColumn () {\n      return this.columns.every(col => !col.width)\n    },\n    getScroll () {\n      if (this.scroll) {\n        return this.scroll\n      } else {\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\n        if (this.height) {\n          // 计算表体可用高度\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \n            ? this.getScrollHeightByHeight \n            : this.height - 100 // 预估值，给表头和分页留空间\n          \n          if (availableHeight > 50) { // 确保有足够的最小高度\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\n            return { x: baseX, y: availableHeight }\n          }\n        }\n        return { x: baseX }\n      }\n    }\n  },\n  watch: {\n    pageSize: {\n      handler (pageSize) {\n        this.innerPageSize = pageSize\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    onShowSizeChange (current, pageSize) {\n      this.innerCurrentPage = current\n      this.innerPageSize = pageSize\n      this.$emit('change-page', current, pageSize)\n    },\n    setPaginationHeight () {\n      this.$nextTick(() => {\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\n        this.paginationHeight = height\n      })\n    },\n    setTableHeaderHeight () {\n      this.$nextTick(() => {\n        const el = document.querySelector('.ant-table-header')\n        if (!el) return\n        const { height } = el.getBoundingClientRect()\n        this.tableHeaderHeight = height\n      })\n    },\n    setTableTbodyHeight () {\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\n      this.$nextTick(() => {\n        this.setTableHeaderHeight()\n      })\n    },\n    setRowClassName (record, idx) {\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n    },\n    onChangePagination (page, pageSize) {\n      this.innerCurrentPage = page\n      this.innerPageSize = pageSize\n      this.$emit('change-page', page, pageSize)\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.setPaginationHeight()\n      setTimeout(() => {\n        this.setTableTbodyHeight()\n        // 再测一次分页高度，确保初次渲染完成后数值准确\n        this.setPaginationHeight()\n      }, 200)\n    })\n  },\n  destroyed () {\n    this.obs.forEach(ob => ob.disconnect())\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  ::v-deep .ant-table-wrapper {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-nested-loading {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-container {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* 确保表体能够正常纵向滚动 */\n  ::v-deep .ant-table-content {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  ::v-deep .ant-table-scroll {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table-header {\n    flex: 0 0 auto;\n    overflow: hidden;\n  }\n  ::v-deep .ant-table-fixed {\n    .ant-table-tbody {\n      .g-table__row--odd {\n        &.ant-table-row-hover {\n          td {\n            background-color: var(--idooel-row-hover-color);\n          }\n          .ant-table-selection-column {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n          .ant-table-row-cell-break-word {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n        }\n        td {\n          background-color: var(--idooel-row-odd-color);\n        }\n        .ant-table-selection-column {\n          background-color: var(--idooel-row-odd-color) !important;\n        }\n        .ant-table-row-cell-break-word {\n          background-color: var(--idooel-row-odd-color) !important;\n        }\n      }\n    }\n    .ant-table-thead {\n      background: rgba(0, 0, 0, 0.03) !important;\n    }\n  }\n\n  ::v-deep .ant-table-body {\n    flex: 1 1 auto;\n    overflow: auto !important;\n    /* 确保滚动条稳定，避免列宽抖动 */\n    scrollbar-gutter: stable;\n  }\n\n  /* 分页区域固定在底部，不被挤出视口 */\n  .g-table__pagination {\n    flex: 0 0 auto;\n    display: flex;\n    flex-direction: row;\n    justify-content: end;\n    border-top: unset;\n    padding-top: 8px;\n    padding-bottom: 8px;\n    background: #fff;\n    z-index: 999;\n  }\n}\n</style>"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$C = "data-v-7943901f";
+  const __vue_scope_id__$C = "data-v-3f1790f0";
   /* module identifier */
   const __vue_module_identifier__$C = undefined;
   /* functional template */

package/dist/@idooel/components.umd.js

@@ -1958,6 +1958,7 @@
             bordered: _vm.bordered,
             pagination: false,
             loading: _vm.loading,
+            size: "middle",
             columns: _vm.innerColumns,
             "row-selection": _vm.rowSelection,
             "row-class-name": _vm.setRowClassName,
@@ -2016,11 +2017,11 @@
     /* style */
     const __vue_inject_styles__$C = function (inject) {
       if (!inject) return
-      inject("data-v-7943901f_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-7943901f] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-7943901f]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination[data-v-7943901f] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACwNhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;EA6BA,iBAAA;EA6CA,qBAAA;AD/RA;ACsNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADpNA;ACuNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADrNA;ACwNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADtNA;ACyNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADvNA;AC2NA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;ADzNA;AC4NA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD1NA;AC6NA;EACA,cAAA;EACA,gBAAA;AD3NA;ACiOA;EACA,0DAAA;AD/NA;ACiOA;EACA,0DAAA;AD/NA;ACkOA;EACA,6CAAA;ADhOA;ACkOA;EACA,6CAAA;ADhOA;ACsOA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADpOA;ACwOA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADtOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\n    <a-table\n      :bordered=\"bordered\"\n      :class=\"[isNoData && 'g-table__no-data']\"\n      :pagination=\"false\"\n      :loading=\"loading\"\n      :columns=\"innerColumns\"\n      :row-selection=\"rowSelection\"\n      :row-class-name=\"setRowClassName\"\n      :data-source=\"dataSource\"\n      :scroll=\"getScroll\">\n      <template slot=\"action\" slot-scope=\"record\">\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n      </template>\n    </a-table>\n    <div class=\"g-table__pagination\">\n      <a-pagination\n        :show-total=\"all => `共 ${all} 条数据`\"\n        show-size-changer \n        show-quick-jumper\n        :pageSize=\"innerPageSize\"\n        :current=\"innerCurrentPage\"\n        :pageSizeOptions=\"pageSizeOptions\"\n        @change=\"onChangePagination\"\n        @showSizeChange=\"onShowSizeChange\"\n        :total=\"total\">\n      </a-pagination>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n  name: 'ele-table',\n  components: {\n    Actions\n  },\n  props: {\n    // ant table wrapper\n    height: {\n      type: Number\n    },\n    width: {\n      type: Number\n    },\n    x: {\n      type: Number,\n      default: 1200\n    },\n    y: {\n      type: Number,\n      default: 200\n    },\n    scroll: {\n      type: Object\n    },\n    rowSelection: {\n      type: Object\n    },\n    actions: {\n      type: Array,\n      default: () => []\n    },\n    total: {\n      type: Number,\n      default: 0\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    columns: {\n      type: Array,\n      default: () => []\n    },\n    dataSource: {\n      type: Array,\n      default: () => []\n    },\n    pageSize: {\n      type: Number,\n      default: 10\n    },\n    pageSizeOptions: {\n      type: Array,\n      default: () => ['10', '20', '30', '40']\n    },\n    bordered: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      tableHeaderHeight: 0,\n      paginationHeight: 0,\n      innerPageSize: 10,\n      innerCurrentPage: 1,\n      tableContentHeight: 0,\n      obs: []\n    }\n  },\n  computed: {\n    wrapperStyle () {\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\n      if (!this.height) return {}\n      return { height: `${this.height}px` }\n    },\n    needScrollY () {\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\n      if (!this.height) return false\n      \n      const availableHeight = this.getScrollHeightByHeight\n      if (availableHeight <= 0) return false\n      \n      // 预估每行高度（包含边框），antd 默认约 54px\n      const estimatedRowHeight = 54\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n      \n      return estimatedTableHeight > availableHeight\n    },\n    innerColumns () {\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n    },\n    isNoData () {\n      return !this.dataSource.length\n    },\n    getScrollHeightByHeight () {\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\n      return this.height - this.tableHeaderHeight - this.paginationHeight\n    },\n    isFlexColumn () {\n      return this.columns.every(col => !col.width)\n    },\n    getScroll () {\n      if (this.scroll) {\n        return this.scroll\n      } else {\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\n        if (this.height) {\n          // 计算表体可用高度\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \n            ? this.getScrollHeightByHeight \n            : this.height - 100 // 预估值，给表头和分页留空间\n          \n          if (availableHeight > 50) { // 确保有足够的最小高度\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\n            return { x: baseX, y: availableHeight }\n          }\n        }\n        return { x: baseX }\n      }\n    }\n  },\n  watch: {\n    pageSize: {\n      handler (pageSize) {\n        this.innerPageSize = pageSize\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    onShowSizeChange (current, pageSize) {\n      this.innerCurrentPage = current\n      this.innerPageSize = pageSize\n      this.$emit('change-page', current, pageSize)\n    },\n    setPaginationHeight () {\n      this.$nextTick(() => {\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\n        this.paginationHeight = height\n      })\n    },\n    setTableHeaderHeight () {\n      this.$nextTick(() => {\n        const el = document.querySelector('.ant-table-header')\n        if (!el) return\n        const { height } = el.getBoundingClientRect()\n        this.tableHeaderHeight = height\n      })\n    },\n    setTableTbodyHeight () {\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\n      this.$nextTick(() => {\n        this.setTableHeaderHeight()\n      })\n    },\n    setRowClassName (record, idx) {\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n    },\n    onChangePagination (page, pageSize) {\n      this.innerCurrentPage = page\n      this.innerPageSize = pageSize\n      this.$emit('change-page', page, pageSize)\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.setPaginationHeight()\n      setTimeout(() => {\n        this.setTableTbodyHeight()\n        // 再测一次分页高度，确保初次渲染完成后数值准确\n        this.setPaginationHeight()\n      }, 200)\n    })\n  },\n  destroyed () {\n    this.obs.forEach(ob => ob.disconnect())\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  ::v-deep .ant-table-wrapper {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-nested-loading {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-container {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* 确保表体能够正常纵向滚动 */\n  ::v-deep .ant-table-content {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  ::v-deep .ant-table-scroll {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table-header {\n    flex: 0 0 auto;\n    overflow: hidden;\n  }\n  ::v-deep .ant-table-fixed {\n    .ant-table-tbody {\n      .g-table__row--odd {\n        &.ant-table-row-hover {\n          .ant-table-selection-column {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n          .ant-table-row-cell-break-word {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n        }\n        .ant-table-selection-column {\n          background-color: var(--idooel-row-odd-color);\n        }\n        .ant-table-row-cell-break-word {\n          background-color: var(--idooel-row-odd-color);\n        }\n      }\n    }\n  }\n\n  ::v-deep .ant-table-body {\n    flex: 1 1 auto;\n    overflow: auto !important;\n    /* 确保滚动条稳定，避免列宽抖动 */\n    scrollbar-gutter: stable;\n  }\n\n  /* 分页区域固定在底部，不被挤出视口 */\n  .g-table__pagination {\n    flex: 0 0 auto;\n    display: flex;\n    flex-direction: row;\n    justify-content: end;\n    border-top: unset;\n    padding-top: 8px;\n    padding-bottom: 8px;\n    background: #fff;\n    z-index: 999;\n  }\n}\n</style>"]}, media: undefined });
+      inject("data-v-3f1790f0_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-3f1790f0] {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-3f1790f0]  .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination[data-v-3f1790f0] {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACyNhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;EA6BA,iBAAA;EAsDA,qBAAA;ADzSA;ACuNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADrNA;ACwNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADtNA;ACyNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADvNA;AC0NA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADxNA;AC4NA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD1NA;AC6NA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD3NA;AC8NA;EACA,cAAA;EACA,gBAAA;AD5NA;ACkOA;EACA,+CAAA;ADhOA;ACkOA;EACA,0DAAA;ADhOA;ACkOA;EACA,0DAAA;ADhOA;ACmOA;EACA,6CAAA;ADjOA;ACmOA;EACA,wDAAA;ADjOA;ACmOA;EACA,wDAAA;ADjOA;ACqOA;EACA,0CAAA;ADnOA;ACuOA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADrOA;ACyOA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  /* 确保表体能够正常纵向滚动 */\n  /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n  flex: 0 0 auto;\n  overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover td {\n  background-color: var(--idooel-row-hover-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-selection-column {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd.ant-table-row-hover .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-hover-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd td {\n  background-color: var(--idooel-row-odd-color);\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-selection-column {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody .g-table__row--odd .ant-table-row-cell-break-word {\n  background-color: var(--idooel-row-odd-color) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead {\n  background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n  flex: 1 1 auto;\n  overflow: auto !important;\n  /* 确保滚动条稳定，避免列宽抖动 */\n  scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n  z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\n    <a-table\n      :bordered=\"bordered\"\n      :class=\"[isNoData && 'g-table__no-data']\"\n      :pagination=\"false\"\n      :loading=\"loading\"\n      size=\"middle\"\n      :columns=\"innerColumns\"\n      :row-selection=\"rowSelection\"\n      :row-class-name=\"setRowClassName\"\n      :data-source=\"dataSource\"\n      :scroll=\"getScroll\">\n      <template slot=\"action\" slot-scope=\"record\">\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n      </template>\n    </a-table>\n    <div class=\"g-table__pagination\">\n      <a-pagination\n        :show-total=\"all => `共 ${all} 条数据`\"\n        show-size-changer \n        show-quick-jumper\n        :pageSize=\"innerPageSize\"\n        :current=\"innerCurrentPage\"\n        :pageSizeOptions=\"pageSizeOptions\"\n        @change=\"onChangePagination\"\n        @showSizeChange=\"onShowSizeChange\"\n        :total=\"total\">\n      </a-pagination>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n  name: 'ele-table',\n  components: {\n    Actions\n  },\n  props: {\n    // ant table wrapper\n    height: {\n      type: Number\n    },\n    width: {\n      type: Number\n    },\n    x: {\n      type: Number,\n      default: 1200\n    },\n    y: {\n      type: Number,\n      default: 200\n    },\n    scroll: {\n      type: Object\n    },\n    rowSelection: {\n      type: Object\n    },\n    actions: {\n      type: Array,\n      default: () => []\n    },\n    total: {\n      type: Number,\n      default: 0\n    },\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    columns: {\n      type: Array,\n      default: () => []\n    },\n    dataSource: {\n      type: Array,\n      default: () => []\n    },\n    pageSize: {\n      type: Number,\n      default: 10\n    },\n    pageSizeOptions: {\n      type: Array,\n      default: () => ['10', '20', '30', '40']\n    },\n    bordered: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      tableHeaderHeight: 0,\n      paginationHeight: 0,\n      innerPageSize: 10,\n      innerCurrentPage: 1,\n      tableContentHeight: 0,\n      obs: []\n    }\n  },\n  computed: {\n    wrapperStyle () {\n      // 外层容器样式：确保分页始终可见，表格充满剩余空间\n      if (!this.height) return {}\n      return { height: `${this.height}px` }\n    },\n    needScrollY () {\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\n      if (!this.height) return false\n      \n      const availableHeight = this.getScrollHeightByHeight\n      if (availableHeight <= 0) return false\n      \n      // 预估每行高度（包含边框），antd 默认约 54px\n      const estimatedRowHeight = 54\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n      \n      return estimatedTableHeight > availableHeight\n    },\n    innerColumns () {\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n    },\n    isNoData () {\n      return !this.dataSource.length\n    },\n    getScrollHeightByHeight () {\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\n      return this.height - this.tableHeaderHeight - this.paginationHeight\n    },\n    isFlexColumn () {\n      return this.columns.every(col => !col.width)\n    },\n    getScroll () {\n      if (this.scroll) {\n        return this.scroll\n      } else {\n        const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\n        if (this.height) {\n          // 计算表体可用高度\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \n            ? this.getScrollHeightByHeight \n            : this.height - 100 // 预估值，给表头和分页留空间\n          \n          if (availableHeight > 50) { // 确保有足够的最小高度\n            console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\n            return { x: baseX, y: availableHeight }\n          }\n        }\n        return { x: baseX }\n      }\n    }\n  },\n  watch: {\n    pageSize: {\n      handler (pageSize) {\n        this.innerPageSize = pageSize\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    onShowSizeChange (current, pageSize) {\n      this.innerCurrentPage = current\n      this.innerPageSize = pageSize\n      this.$emit('change-page', current, pageSize)\n    },\n    setPaginationHeight () {\n      this.$nextTick(() => {\n        const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\n        this.paginationHeight = height\n      })\n    },\n    setTableHeaderHeight () {\n      this.$nextTick(() => {\n        const el = document.querySelector('.ant-table-header')\n        if (!el) return\n        const { height } = el.getBoundingClientRect()\n        this.tableHeaderHeight = height\n      })\n    },\n    setTableTbodyHeight () {\n      // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\n      this.$nextTick(() => {\n        this.setTableHeaderHeight()\n      })\n    },\n    setRowClassName (record, idx) {\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n    },\n    onChangePagination (page, pageSize) {\n      this.innerCurrentPage = page\n      this.innerPageSize = pageSize\n      this.$emit('change-page', page, pageSize)\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.setPaginationHeight()\n      setTimeout(() => {\n        this.setTableTbodyHeight()\n        // 再测一次分页高度，确保初次渲染完成后数值准确\n        this.setPaginationHeight()\n      }, 200)\n    })\n  },\n  destroyed () {\n    this.obs.forEach(ob => ob.disconnect())\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n  /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  /* 表格区域占满剩余空间，启用纵向滚动 */\n  ::v-deep .ant-table-wrapper {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-nested-loading {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-spin-container {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table {\n    flex: 1 1 auto;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* 确保表体能够正常纵向滚动 */\n  ::v-deep .ant-table-content {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  ::v-deep .ant-table-scroll {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::v-deep .ant-table-header {\n    flex: 0 0 auto;\n    overflow: hidden;\n  }\n  ::v-deep .ant-table-fixed {\n    .ant-table-tbody {\n      .g-table__row--odd {\n        &.ant-table-row-hover {\n          td {\n            background-color: var(--idooel-row-hover-color);\n          }\n          .ant-table-selection-column {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n          .ant-table-row-cell-break-word {\n            background-color: var(--idooel-row-hover-color) !important;\n          }\n        }\n        td {\n          background-color: var(--idooel-row-odd-color);\n        }\n        .ant-table-selection-column {\n          background-color: var(--idooel-row-odd-color) !important;\n        }\n        .ant-table-row-cell-break-word {\n          background-color: var(--idooel-row-odd-color) !important;\n        }\n      }\n    }\n    .ant-table-thead {\n      background: rgba(0, 0, 0, 0.03) !important;\n    }\n  }\n\n  ::v-deep .ant-table-body {\n    flex: 1 1 auto;\n    overflow: auto !important;\n    /* 确保滚动条稳定，避免列宽抖动 */\n    scrollbar-gutter: stable;\n  }\n\n  /* 分页区域固定在底部，不被挤出视口 */\n  .g-table__pagination {\n    flex: 0 0 auto;\n    display: flex;\n    flex-direction: row;\n    justify-content: end;\n    border-top: unset;\n    padding-top: 8px;\n    padding-bottom: 8px;\n    background: #fff;\n    z-index: 999;\n  }\n}\n</style>"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$C = "data-v-7943901f";
+    const __vue_scope_id__$C = "data-v-3f1790f0";
     /* module identifier */
     const __vue_module_identifier__$C = undefined;
     /* functional template */

package/package.json

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

package/packages/table/src/index.vue

@@ -5,6 +5,7 @@
       :class="[isNoData && 'g-table__no-data']"
       :pagination="false"
       :loading="loading"
+      size="middle"
       :columns="innerColumns"
       :row-selection="rowSelection"
       :row-class-name="setRowClassName"
@@ -270,6 +271,9 @@ export default {
     .ant-table-tbody {
       .g-table__row--odd {
         &.ant-table-row-hover {
+          td {
+            background-color: var(--idooel-row-hover-color);
+          }
           .ant-table-selection-column {
             background-color: var(--idooel-row-hover-color) !important;
           }
@@ -277,14 +281,20 @@ export default {
             background-color: var(--idooel-row-hover-color) !important;
           }
         }
-        .ant-table-selection-column {
+        td {
           background-color: var(--idooel-row-odd-color);
         }
+        .ant-table-selection-column {
+          background-color: var(--idooel-row-odd-color) !important;
+        }
         .ant-table-row-cell-break-word {
-          background-color: var(--idooel-row-odd-color);
+          background-color: var(--idooel-row-odd-color) !important;
         }
       }
     }
+    .ant-table-thead {
+      background: rgba(0, 0, 0, 0.03) !important;
+    }
   }
 
   ::v-deep .ant-table-body {