@idooel/components 0.0.2-beta.25 → 0.0.2-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/@idooel/components.esm.js +16 -31
  2. package/dist/@idooel/components.umd.js +16 -31
  3. package/package.json +1 -1
  4. package/packages/table/src/index.vue +38 -99
package/dist/@idooel/components.esm.js CHANGED
@@ -2187,7 +2187,7 @@ var script$D = {
2187
2187
  },
2188
2188
  computed: {
2189
2189
  wrapperStyle() {
2190
- // 外层容器样式：确保分页始终可见，表格充满剩余空间
2190
+ // 外层容器样式
2191
2191
  if (!this.height) return {};
2192
2192
  return {
2193
2193
  height: `${this.height}px`
@@ -2221,20 +2221,11 @@ var script$D = {
2221
2221
  if (this.scroll) {
2222
2222
  return this.scroll;
2223
2223
  } else {
2224
- const baseX = this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x;
2225
- if (this.height) {
2226
- // 计算表体可用高度
2227
- const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100; // 预估值，给表头和分页留空间
2228
-
2224
+ // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
2225
+ const baseX = this.x || 1200;
2226
+ if (this.height && this.needScrollY) {
2227
+ const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
2229
2228
  if (availableHeight > 50) {
2230
- // 确保有足够的最小高度
2231
- console.log('Table scroll config:', {
2232
- x: baseX,
2233
- y: availableHeight,
2234
- height: this.height,
2235
- headerHeight: this.tableHeaderHeight,
2236
- paginationHeight: this.paginationHeight
2237
- });
2238
2229
  return {
2239
2230
  x: baseX,
2240
2231
  y: availableHeight
@@ -2257,23 +2248,24 @@ var script$D = {
2257
2248
  },
2258
2249
  methods: {
2259
2250
  onShowSizeChange(current, pageSize) {
2260
- console.log('onShowSizeChangecurrent', current);
2261
- console.log(' onShowSizeChangepageSize', pageSize);
2262
2251
  this.innerCurrentPage = current;
2263
2252
  this.innerPageSize = pageSize;
2264
2253
  this.$emit('change-page', current, pageSize);
2265
2254
  },
2266
2255
  setPaginationHeight() {
2267
2256
  this.$nextTick(() => {
2268
- const {
2269
- height
2270
- } = document.querySelector('.g-table__pagination').getBoundingClientRect();
2271
- this.paginationHeight = height;
2257
+ const el = this.$el.querySelector('.g-table__pagination');
2258
+ if (el) {
2259
+ const {
2260
+ height
2261
+ } = el.getBoundingClientRect();
2262
+ this.paginationHeight = height;
2263
+ }
2272
2264
  });
2273
2265
  },
2274
2266
  setTableHeaderHeight() {
2275
2267
  this.$nextTick(() => {
2276
- const el = document.querySelector('.ant-table-header');
2268
+ const el = this.$el.querySelector('.ant-table-header');
2277
2269
  if (!el) return;
2278
2270
  const {
2279
2271
  height
@@ -2282,7 +2274,6 @@ var script$D = {
2282
2274
  });
2283
2275
  },
2284
2276
  setTableTbodyHeight() {
2285
- // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
2286
2277
  this.$nextTick(() => {
2287
2278
  this.setTableHeaderHeight();
2288
2279
  });
@@ -2291,7 +2282,6 @@ var script$D = {
2291
2282
  return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
2292
2283
  },
2293
2284
  onChangePagination(page, pageSize) {
2294
- console.log('page', page);
2295
2285
  this.innerCurrentPage = page;
2296
2286
  this.innerPageSize = pageSize;
2297
2287
  this.$emit('change-page', page, pageSize);
@@ -2302,7 +2292,6 @@ var script$D = {
2302
2292
  this.setPaginationHeight();
2303
2293
  setTimeout(() => {
2304
2294
  this.setTableTbodyHeight();
2305
- // 再测一次分页高度，确保初次渲染完成后数值准确
2306
2295
  this.setPaginationHeight();
2307
2296
  }, 200);
2308
2297
  });
@@ -2322,11 +2311,7 @@ var __vue_render__$D = function () {
2322
2311
  var _c = _vm._self._c || _h;
2323
2312
  return _c(
2324
2313
  "div",
2325
- {
2326
- staticClass: "g-table__wrapper",
2327
- class: { "g-table--no-scroll-y": !_vm.needScrollY },
2328
- style: _vm.wrapperStyle,
2329
- },
2314
+ { staticClass: "g-table__wrapper", style: _vm.wrapperStyle },
2330
2315
  [
2331
2316
  _c("a-table", {
2332
2317
  class: [_vm.isNoData && "g-table__no-data"],
@@ -2406,11 +2391,11 @@ __vue_render__$D._withStripped = true;
2406
2391
  /* style */
2407
2392
  const __vue_inject_styles__$D = function (inject) {
2408
2393
  if (!inject) return
2409
- inject("data-v-5681c4f1_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-5681c4f1] {\n /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] {\n /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-content {\n flex: 1 1 auto;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-scroll {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-header {\n flex: 0 0 auto;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .ant-table-fixed .ant-table-thead {\n background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-body {\n flex: 1 1 auto;\n overflow: auto !important;\n /* 确保滚动条稳定，避免列宽抖动 */\n scrollbar-gutter: stable;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination[data-v-5681c4f1] {\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.g-table__wrapper[data-v-5681c4f1] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC6OhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;AD5OA;AC6OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD3OA;AC8OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD5OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD7OA;ACgPA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD9OA;AC8MA;EAmCA,iBAAA;AD9OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD7OA;ACgPA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD9OA;ACiPA;EACA,cAAA;EACA,gBAAA;AD/OA;ACqPA;EACA,+CAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACsPA;EACA,6CAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACwPA;EACA,0CAAA;ADtPA;AC0PA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADxPA;ACkKA;EAyFA,qBAAA;ADxPA;ACyPA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvPA;ACoJA;EAsGA,cAAA;ADvPA;ACwPA;EACA,kBAAA;ADtPA;ACuPA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADrPA;;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.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 {\n /* 确保表体能够正常纵向滚动 */\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 {\n /* 分页区域固定在底部，不被挤出视口 */\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.g-table__wrapper {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\r\n <a-table\r\n :bordered=\"bordered\"\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n size=\"middle\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n v-if=\"mode === 'default'\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n <ele-pagination\r\n v-else\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\"\r\n ></ele-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n mode: {\r\n type: String,\r\n default: 'default',\r\n validator: (value) => {\r\n return ['default', 'next-cursor'].includes(value)\r\n }\r\n },\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: [Number, String],\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n },\r\n bordered: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n wrapperStyle () {\r\n // 外层容器样式：确保分页始终可见，表格充满剩余空间\r\n if (!this.height) return {}\r\n return { height: `${this.height}px` }\r\n },\r\n needScrollY () {\r\n // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n if (!this.height) return false\r\n \r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight <= 0) return false\r\n \r\n // 预估每行高度（包含边框），antd 默认约 54px\r\n const estimatedRowHeight = 54\r\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n \r\n return estimatedTableHeight > availableHeight\r\n },\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n getScrollHeightByHeight () {\r\n // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\r\n if (this.height) {\r\n // 计算表体可用高度\r\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n ? this.getScrollHeightByHeight \r\n : this.height - 100 // 预估值，给表头和分页留空间\r\n \r\n if (availableHeight > 50) { // 确保有足够的最小高度\r\n console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\r\n return { x: baseX, y: availableHeight }\r\n }\r\n }\r\n return { x: baseX }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n console.log('onShowSizeChangecurrent', current)\r\n console.log(' onShowSizeChangepageSize', pageSize)\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const el = document.querySelector('.ant-table-header')\r\n if (!el) return\r\n const { height } = el.getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableTbodyHeight () {\r\n // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\r\n this.$nextTick(() => {\r\n this.setTableHeaderHeight()\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n console.log('page', page)\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n // 再测一次分页高度，确保初次渲染完成后数值准确\r\n this.setPaginationHeight()\r\n }, 200)\r\n })\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n\r\n /* 表格区域占满剩余空间，启用纵向滚动 */\r\n ::v-deep .ant-table-wrapper {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-spin-nested-loading {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-spin-container {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-table {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n /* 确保表体能够正常纵向滚动 */\r\n ::v-deep .ant-table-content {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n ::v-deep .ant-table-scroll {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-table-header {\r\n flex: 0 0 auto;\r\n overflow: hidden;\r\n }\r\n ::v-deep .ant-table-fixed {\r\n .ant-table-tbody {\r\n .g-table__row--odd {\r\n &.ant-table-row-hover {\r\n td {\r\n background-color: var(--idooel-row-hover-color);\r\n }\r\n .ant-table-selection-column {\r\n background-color: var(--idooel-row-hover-color) !important;\r\n }\r\n .ant-table-row-cell-break-word {\r\n background-color: var(--idooel-row-hover-color) !important;\r\n }\r\n }\r\n td {\r\n background-color: var(--idooel-row-odd-color);\r\n }\r\n .ant-table-selection-column {\r\n background-color: var(--idooel-row-odd-color) !important;\r\n }\r\n .ant-table-row-cell-break-word {\r\n background-color: var(--idooel-row-odd-color) !important;\r\n }\r\n }\r\n }\r\n .ant-table-thead {\r\n background: rgba(0, 0, 0, 0.03) !important;\r\n }\r\n }\r\n\r\n ::v-deep .ant-table-body {\r\n flex: 1 1 auto;\r\n overflow: auto !important;\r\n /* 确保滚动条稳定，避免列宽抖动 */\r\n scrollbar-gutter: stable;\r\n }\r\n\r\n /* 分页区域固定在底部，不被挤出视口 */\r\n .g-table__pagination {\r\n flex: 0 0 auto;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n background: #fff;\r\n z-index: 999;\r\n }\r\n\r\n /* 空数据状态顶部显示 */\r\n .g-table__no-data {\r\n position: relative;\r\n ::v-deep .ant-table-placeholder {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -40%);\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n color: #999;\r\n font-size: 14px;\r\n font-weight: normal;\r\n line-height: 20px;\r\n overflow: hidden;\r\n border: unset;\r\n }\r\n }\r\n}\r\n</style>"]}, media: undefined });
2394
+ inject("data-v-9fb141ac_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-9fb141ac] {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 固定列使用相同的行高 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-fixed .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 表头也统一高度 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-fixed .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-9fb141ac] {\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}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC2OhB;EACA,sBAAA;ADzOA;AC0OA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADxOA;ACkOA;EASA,eAAA;ADxOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;ACyNA;EAiBA,YAAA;ADvOA;ACwOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADtOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;AC0MA;EAgCA,cAAA;ADvOA;ACwOA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADtOA;AC8LA;EA2CA,cAAA;ADtOA;ACuOA;EACA,kBAAA;ADrOA;ACsOA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADpOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 固定列使用相同的行高 */\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 表头也统一高度 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\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}\n.g-table__wrapper {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n <div class=\"g-table__wrapper\" :style=\"wrapperStyle\">\r\n <a-table\r\n :bordered=\"bordered\"\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n size=\"middle\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n v-if=\"mode === 'default'\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n <ele-pagination\r\n v-else\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\"\r\n ></ele-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n mode: {\r\n type: String,\r\n default: 'default',\r\n validator: (value) => {\r\n return ['default', 'next-cursor'].includes(value)\r\n }\r\n },\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: [Number, String],\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n },\r\n bordered: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n wrapperStyle () {\r\n // 外层容器样式\r\n if (!this.height) return {}\r\n return { height: `${this.height}px` }\r\n },\r\n needScrollY () {\r\n // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n if (!this.height) return false\r\n \r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight <= 0) return false\r\n \r\n // 预估每行高度（包含边框），antd 默认约 54px\r\n const estimatedRowHeight = 54\r\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n \r\n return estimatedTableHeight > availableHeight\r\n },\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n getScrollHeightByHeight () {\r\n // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n const baseX = this.x || 1200\r\n \r\n if (this.height && this.needScrollY) {\r\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n ? this.getScrollHeightByHeight \r\n : this.height - 100\r\n \r\n if (availableHeight > 50) {\r\n return { x: baseX, y: availableHeight }\r\n }\r\n }\r\n return { x: baseX }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const el = this.$el.querySelector('.g-table__pagination')\r\n if (el) {\r\n const { height } = el.getBoundingClientRect()\r\n this.paginationHeight = height\r\n }\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const el = this.$el.querySelector('.ant-table-header')\r\n if (!el) return\r\n const { height } = el.getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableTbodyHeight () {\r\n this.$nextTick(() => {\r\n this.setTableHeaderHeight()\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n this.setPaginationHeight()\r\n }, 200)\r\n })\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n /* 强制统一行高，确保主表和固定列对齐 */\r\n ::v-deep .ant-table-tbody > tr > td {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 固定列使用相同的行高 */\r\n ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 表头也统一高度 */\r\n ::v-deep .ant-table-thead > tr > th {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 分页区域固定在底部 */\r\n .g-table__pagination {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n background: #fff;\r\n }\r\n\r\n /* 空数据状态顶部显示 */\r\n .g-table__no-data {\r\n position: relative;\r\n ::v-deep .ant-table-placeholder {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -40%);\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n color: #999;\r\n font-size: 14px;\r\n font-weight: normal;\r\n line-height: 20px;\r\n overflow: hidden;\r\n border: unset;\r\n }\r\n }\r\n}\r\n</style>"]}, media: undefined });
2410
2395
 
2411
2396
  };
2412
2397
  /* scoped */
2413
- const __vue_scope_id__$D = "data-v-5681c4f1";
2398
+ const __vue_scope_id__$D = "data-v-9fb141ac";
2414
2399
  /* module identifier */
2415
2400
  const __vue_module_identifier__$D = undefined;
2416
2401
  /* functional template */
package/dist/@idooel/components.umd.js CHANGED
@@ -2192,7 +2192,7 @@
2192
2192
  },
2193
2193
  computed: {
2194
2194
  wrapperStyle() {
2195
- // 外层容器样式：确保分页始终可见，表格充满剩余空间
2195
+ // 外层容器样式
2196
2196
  if (!this.height) return {};
2197
2197
  return {
2198
2198
  height: `${this.height}px`
@@ -2226,20 +2226,11 @@
2226
2226
  if (this.scroll) {
2227
2227
  return this.scroll;
2228
2228
  } else {
2229
- const baseX = this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x;
2230
- if (this.height) {
2231
- // 计算表体可用高度
2232
- const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100; // 预估值，给表头和分页留空间
2233
-
2229
+ // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
2230
+ const baseX = this.x || 1200;
2231
+ if (this.height && this.needScrollY) {
2232
+ const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
2234
2233
  if (availableHeight > 50) {
2235
- // 确保有足够的最小高度
2236
- console.log('Table scroll config:', {
2237
- x: baseX,
2238
- y: availableHeight,
2239
- height: this.height,
2240
- headerHeight: this.tableHeaderHeight,
2241
- paginationHeight: this.paginationHeight
2242
- });
2243
2234
  return {
2244
2235
  x: baseX,
2245
2236
  y: availableHeight
@@ -2262,23 +2253,24 @@
2262
2253
  },
2263
2254
  methods: {
2264
2255
  onShowSizeChange(current, pageSize) {
2265
- console.log('onShowSizeChangecurrent', current);
2266
- console.log(' onShowSizeChangepageSize', pageSize);
2267
2256
  this.innerCurrentPage = current;
2268
2257
  this.innerPageSize = pageSize;
2269
2258
  this.$emit('change-page', current, pageSize);
2270
2259
  },
2271
2260
  setPaginationHeight() {
2272
2261
  this.$nextTick(() => {
2273
- const {
2274
- height
2275
- } = document.querySelector('.g-table__pagination').getBoundingClientRect();
2276
- this.paginationHeight = height;
2262
+ const el = this.$el.querySelector('.g-table__pagination');
2263
+ if (el) {
2264
+ const {
2265
+ height
2266
+ } = el.getBoundingClientRect();
2267
+ this.paginationHeight = height;
2268
+ }
2277
2269
  });
2278
2270
  },
2279
2271
  setTableHeaderHeight() {
2280
2272
  this.$nextTick(() => {
2281
- const el = document.querySelector('.ant-table-header');
2273
+ const el = this.$el.querySelector('.ant-table-header');
2282
2274
  if (!el) return;
2283
2275
  const {
2284
2276
  height
@@ -2287,7 +2279,6 @@
2287
2279
  });
2288
2280
  },
2289
2281
  setTableTbodyHeight() {
2290
- // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
2291
2282
  this.$nextTick(() => {
2292
2283
  this.setTableHeaderHeight();
2293
2284
  });
@@ -2296,7 +2287,6 @@
2296
2287
  return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
2297
2288
  },
2298
2289
  onChangePagination(page, pageSize) {
2299
- console.log('page', page);
2300
2290
  this.innerCurrentPage = page;
2301
2291
  this.innerPageSize = pageSize;
2302
2292
  this.$emit('change-page', page, pageSize);
@@ -2307,7 +2297,6 @@
2307
2297
  this.setPaginationHeight();
2308
2298
  setTimeout(() => {
2309
2299
  this.setTableTbodyHeight();
2310
- // 再测一次分页高度，确保初次渲染完成后数值准确
2311
2300
  this.setPaginationHeight();
2312
2301
  }, 200);
2313
2302
  });
@@ -2327,11 +2316,7 @@
2327
2316
  var _c = _vm._self._c || _h;
2328
2317
  return _c(
2329
2318
  "div",
2330
- {
2331
- staticClass: "g-table__wrapper",
2332
- class: { "g-table--no-scroll-y": !_vm.needScrollY },
2333
- style: _vm.wrapperStyle,
2334
- },
2319
+ { staticClass: "g-table__wrapper", style: _vm.wrapperStyle },
2335
2320
  [
2336
2321
  _c("a-table", {
2337
2322
  class: [_vm.isNoData && "g-table__no-data"],
@@ -2411,11 +2396,11 @@
2411
2396
  /* style */
2412
2397
  const __vue_inject_styles__$D = function (inject) {
2413
2398
  if (!inject) return
2414
- inject("data-v-5681c4f1_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-5681c4f1] {\n /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* 表格区域占满剩余空间，启用纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] {\n /* 确保表体能够正常纵向滚动 */\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-content {\n flex: 1 1 auto;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-scroll {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-header {\n flex: 0 0 auto;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .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-5681c4f1] .ant-table-fixed .ant-table-thead {\n background: rgba(0, 0, 0, 0.03) !important;\n}\n.g-table__wrapper[data-v-5681c4f1] .ant-table-body {\n flex: 1 1 auto;\n overflow: auto !important;\n /* 确保滚动条稳定，避免列宽抖动 */\n scrollbar-gutter: stable;\n}\n.g-table__wrapper[data-v-5681c4f1] {\n /* 分页区域固定在底部，不被挤出视口 */\n}\n.g-table__wrapper .g-table__pagination[data-v-5681c4f1] {\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.g-table__wrapper[data-v-5681c4f1] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-5681c4f1] .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC6OhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;AD5OA;AC6OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD3OA;AC8OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD5OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD7OA;ACgPA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;AD9OA;AC8MA;EAmCA,iBAAA;AD9OA;AC+OA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;AD7OA;ACgPA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD9OA;ACiPA;EACA,cAAA;EACA,gBAAA;AD/OA;ACqPA;EACA,+CAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACqPA;EACA,0DAAA;ADnPA;ACsPA;EACA,6CAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACsPA;EACA,wDAAA;ADpPA;ACwPA;EACA,0CAAA;ADtPA;AC0PA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;ADxPA;ACkKA;EAyFA,qBAAA;ADxPA;ACyPA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;ADvPA;ACoJA;EAsGA,cAAA;ADvPA;ACwPA;EACA,kBAAA;ADtPA;ACuPA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADrPA;;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.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 {\n /* 确保表体能够正常纵向滚动 */\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 {\n /* 分页区域固定在底部，不被挤出视口 */\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.g-table__wrapper {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\r\n <a-table\r\n :bordered=\"bordered\"\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n size=\"middle\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n v-if=\"mode === 'default'\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n <ele-pagination\r\n v-else\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\"\r\n ></ele-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n mode: {\r\n type: String,\r\n default: 'default',\r\n validator: (value) => {\r\n return ['default', 'next-cursor'].includes(value)\r\n }\r\n },\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: [Number, String],\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n },\r\n bordered: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n wrapperStyle () {\r\n // 外层容器样式：确保分页始终可见，表格充满剩余空间\r\n if (!this.height) return {}\r\n return { height: `${this.height}px` }\r\n },\r\n needScrollY () {\r\n // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n if (!this.height) return false\r\n \r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight <= 0) return false\r\n \r\n // 预估每行高度（包含边框），antd 默认约 54px\r\n const estimatedRowHeight = 54\r\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n \r\n return estimatedTableHeight > availableHeight\r\n },\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n getScrollHeightByHeight () {\r\n // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\r\n if (this.height) {\r\n // 计算表体可用高度\r\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n ? this.getScrollHeightByHeight \r\n : this.height - 100 // 预估值，给表头和分页留空间\r\n \r\n if (availableHeight > 50) { // 确保有足够的最小高度\r\n console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\r\n return { x: baseX, y: availableHeight }\r\n }\r\n }\r\n return { x: baseX }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n console.log('onShowSizeChangecurrent', current)\r\n console.log(' onShowSizeChangepageSize', pageSize)\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const el = document.querySelector('.ant-table-header')\r\n if (!el) return\r\n const { height } = el.getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableTbodyHeight () {\r\n // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听\r\n this.$nextTick(() => {\r\n this.setTableHeaderHeight()\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n console.log('page', page)\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n // 再测一次分页高度，确保初次渲染完成后数值准确\r\n this.setPaginationHeight()\r\n }, 200)\r\n })\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n\r\n /* 表格区域占满剩余空间，启用纵向滚动 */\r\n ::v-deep .ant-table-wrapper {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-spin-nested-loading {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-spin-container {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-table {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n /* 确保表体能够正常纵向滚动 */\r\n ::v-deep .ant-table-content {\r\n flex: 1 1 auto;\r\n min-height: 0;\r\n overflow: hidden;\r\n }\r\n\r\n ::v-deep .ant-table-scroll {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n ::v-deep .ant-table-header {\r\n flex: 0 0 auto;\r\n overflow: hidden;\r\n }\r\n ::v-deep .ant-table-fixed {\r\n .ant-table-tbody {\r\n .g-table__row--odd {\r\n &.ant-table-row-hover {\r\n td {\r\n background-color: var(--idooel-row-hover-color);\r\n }\r\n .ant-table-selection-column {\r\n background-color: var(--idooel-row-hover-color) !important;\r\n }\r\n .ant-table-row-cell-break-word {\r\n background-color: var(--idooel-row-hover-color) !important;\r\n }\r\n }\r\n td {\r\n background-color: var(--idooel-row-odd-color);\r\n }\r\n .ant-table-selection-column {\r\n background-color: var(--idooel-row-odd-color) !important;\r\n }\r\n .ant-table-row-cell-break-word {\r\n background-color: var(--idooel-row-odd-color) !important;\r\n }\r\n }\r\n }\r\n .ant-table-thead {\r\n background: rgba(0, 0, 0, 0.03) !important;\r\n }\r\n }\r\n\r\n ::v-deep .ant-table-body {\r\n flex: 1 1 auto;\r\n overflow: auto !important;\r\n /* 确保滚动条稳定，避免列宽抖动 */\r\n scrollbar-gutter: stable;\r\n }\r\n\r\n /* 分页区域固定在底部，不被挤出视口 */\r\n .g-table__pagination {\r\n flex: 0 0 auto;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n background: #fff;\r\n z-index: 999;\r\n }\r\n\r\n /* 空数据状态顶部显示 */\r\n .g-table__no-data {\r\n position: relative;\r\n ::v-deep .ant-table-placeholder {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -40%);\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n color: #999;\r\n font-size: 14px;\r\n font-weight: normal;\r\n line-height: 20px;\r\n overflow: hidden;\r\n border: unset;\r\n }\r\n }\r\n}\r\n</style>"]}, media: undefined });
2399
+ inject("data-v-9fb141ac_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-9fb141ac] {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 固定列使用相同的行高 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-fixed .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 表头也统一高度 */\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] .ant-table-fixed .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-9fb141ac] {\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}\n.g-table__wrapper[data-v-9fb141ac] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC2OhB;EACA,sBAAA;ADzOA;AC0OA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADxOA;ACkOA;EASA,eAAA;ADxOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;ACyNA;EAiBA,YAAA;ADvOA;ACwOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADtOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;AC0MA;EAgCA,cAAA;ADvOA;ACwOA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADtOA;AC8LA;EA2CA,cAAA;ADtOA;ACuOA;EACA,kBAAA;ADrOA;ACsOA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADpOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 固定列使用相同的行高 */\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 表头也统一高度 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\n height: 54px;\n padding: 8px 16px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.g-table__wrapper {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\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}\n.g-table__wrapper {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -40%);\n width: 100%;\n height: 100%;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: hidden;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n <div class=\"g-table__wrapper\" :style=\"wrapperStyle\">\r\n <a-table\r\n :bordered=\"bordered\"\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n size=\"middle\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n v-if=\"mode === 'default'\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n <ele-pagination\r\n v-else\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\"\r\n ></ele-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n mode: {\r\n type: String,\r\n default: 'default',\r\n validator: (value) => {\r\n return ['default', 'next-cursor'].includes(value)\r\n }\r\n },\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: [Number, String],\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n },\r\n bordered: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n wrapperStyle () {\r\n // 外层容器样式\r\n if (!this.height) return {}\r\n return { height: `${this.height}px` }\r\n },\r\n needScrollY () {\r\n // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n if (!this.height) return false\r\n \r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight <= 0) return false\r\n \r\n // 预估每行高度（包含边框），antd 默认约 54px\r\n const estimatedRowHeight = 54\r\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n \r\n return estimatedTableHeight > availableHeight\r\n },\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n getScrollHeightByHeight () {\r\n // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n const baseX = this.x || 1200\r\n \r\n if (this.height && this.needScrollY) {\r\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n ? this.getScrollHeightByHeight \r\n : this.height - 100\r\n \r\n if (availableHeight > 50) {\r\n return { x: baseX, y: availableHeight }\r\n }\r\n }\r\n return { x: baseX }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const el = this.$el.querySelector('.g-table__pagination')\r\n if (el) {\r\n const { height } = el.getBoundingClientRect()\r\n this.paginationHeight = height\r\n }\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const el = this.$el.querySelector('.ant-table-header')\r\n if (!el) return\r\n const { height } = el.getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableTbodyHeight () {\r\n this.$nextTick(() => {\r\n this.setTableHeaderHeight()\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n this.setPaginationHeight()\r\n }, 200)\r\n })\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n /* 强制统一行高，确保主表和固定列对齐 */\r\n ::v-deep .ant-table-tbody > tr > td {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 固定列使用相同的行高 */\r\n ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 表头也统一高度 */\r\n ::v-deep .ant-table-thead > tr > th {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\r\n height: 54px;\r\n padding: 8px 16px;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* 分页区域固定在底部 */\r\n .g-table__pagination {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n background: #fff;\r\n }\r\n\r\n /* 空数据状态顶部显示 */\r\n .g-table__no-data {\r\n position: relative;\r\n ::v-deep .ant-table-placeholder {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -40%);\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n color: #999;\r\n font-size: 14px;\r\n font-weight: normal;\r\n line-height: 20px;\r\n overflow: hidden;\r\n border: unset;\r\n }\r\n }\r\n}\r\n</style>"]}, media: undefined });
2415
2400
 
2416
2401
  };
2417
2402
  /* scoped */
2418
- const __vue_scope_id__$D = "data-v-5681c4f1";
2403
+ const __vue_scope_id__$D = "data-v-9fb141ac";
2419
2404
  /* module identifier */
2420
2405
  const __vue_module_identifier__$D = undefined;
2421
2406
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idooel/components",
3
- "version": "0.0.2-beta.25",
3
+ "version": "0.0.2-beta.26",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "dist/@idooel/components.umd.js",
package/packages/table/src/index.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="g-table__wrapper" :style="wrapperStyle" :class="{ 'g-table--no-scroll-y': !needScrollY }">
2
+ <div class="g-table__wrapper" :style="wrapperStyle">
3
3
  <a-table
4
4
  :bordered="bordered"
5
5
  :class="[isNoData && 'g-table__no-data']"
@@ -122,7 +122,7 @@ export default {
122
122
  },
123
123
  computed: {
124
124
  wrapperStyle () {
125
- // 外层容器样式：确保分页始终可见，表格充满剩余空间
125
+ // 外层容器样式
126
126
  if (!this.height) return {}
127
127
  return { height: `${this.height}px` }
128
128
  },
@@ -156,15 +156,15 @@ export default {
156
156
  if (this.scroll) {
157
157
  return this.scroll
158
158
  } else {
159
- const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)
160
- if (this.height) {
161
- // 计算表体可用高度
159
+ // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
160
+ const baseX = this.x || 1200
161
+
162
+ if (this.height && this.needScrollY) {
162
163
  const availableHeight = this.tableHeaderHeight && this.paginationHeight
163
164
  ? this.getScrollHeightByHeight
164
- : this.height - 100 // 预估值，给表头和分页留空间
165
+ : this.height - 100
165
166
 
166
- if (availableHeight > 50) { // 确保有足够的最小高度
167
- console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })
167
+ if (availableHeight > 50) {
168
168
  return { x: baseX, y: availableHeight }
169
169
  }
170
170
  }
@@ -182,28 +182,28 @@ export default {
182
182
  },
183
183
  methods: {
184
184
  onShowSizeChange (current, pageSize) {
185
- console.log('onShowSizeChangecurrent', current)
186
- console.log(' onShowSizeChangepageSize', pageSize)
187
185
  this.innerCurrentPage = current
188
186
  this.innerPageSize = pageSize
189
187
  this.$emit('change-page', current, pageSize)
190
188
  },
191
189
  setPaginationHeight () {
192
190
  this.$nextTick(() => {
193
- const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()
194
- this.paginationHeight = height
191
+ const el = this.$el.querySelector('.g-table__pagination')
192
+ if (el) {
193
+ const { height } = el.getBoundingClientRect()
194
+ this.paginationHeight = height
195
+ }
195
196
  })
196
197
  },
197
198
  setTableHeaderHeight () {
198
199
  this.$nextTick(() => {
199
- const el = document.querySelector('.ant-table-header')
200
+ const el = this.$el.querySelector('.ant-table-header')
200
201
  if (!el) return
201
202
  const { height } = el.getBoundingClientRect()
202
203
  this.tableHeaderHeight = height
203
204
  })
204
205
  },
205
206
  setTableTbodyHeight () {
206
- // 简化：仅需要获取表头高度，不再依赖表体高度的动态监听
207
207
  this.$nextTick(() => {
208
208
  this.setTableHeaderHeight()
209
209
  })
@@ -212,7 +212,6 @@ export default {
212
212
  return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
213
213
  },
214
214
  onChangePagination (page, pageSize) {
215
- console.log('page', page)
216
215
  this.innerCurrentPage = page
217
216
  this.innerPageSize = pageSize
218
217
  this.$emit('change-page', page, pageSize)
@@ -223,7 +222,6 @@ export default {
223
222
  this.setPaginationHeight()
224
223
  setTimeout(() => {
225
224
  this.setTableTbodyHeight()
226
- // 再测一次分页高度，确保初次渲染完成后数值准确
227
225
  this.setPaginationHeight()
228
226
  }, 200)
229
227
  })
@@ -236,97 +234,39 @@ export default {
236
234
 
237
235
  <style lang="scss" scoped>
238
236
  .g-table__wrapper {
239
- /* 外层采用列布局，确保分页始终可见，表格充满剩余空间 */
240
- display: flex;
241
- flex-direction: column;
242
- overflow: hidden;
243
-
244
- /* 表格区域占满剩余空间，启用纵向滚动 */
245
- ::v-deep .ant-table-wrapper {
246
- flex: 1 1 auto;
247
- min-height: 0;
248
- display: flex;
249
- flex-direction: column;
250
- }
251
-
252
- ::v-deep .ant-spin-nested-loading {
253
- flex: 1 1 auto;
254
- min-height: 0;
255
- display: flex;
256
- flex-direction: column;
257
- }
258
-
259
- ::v-deep .ant-spin-container {
260
- flex: 1 1 auto;
261
- min-height: 0;
262
- display: flex;
263
- flex-direction: column;
264
- }
265
-
266
- ::v-deep .ant-table {
267
- flex: 1 1 auto;
268
- min-height: 0;
269
- display: flex;
270
- flex-direction: column;
271
- }
272
-
273
- /* 确保表体能够正常纵向滚动 */
274
- ::v-deep .ant-table-content {
275
- flex: 1 1 auto;
276
- min-height: 0;
277
- overflow: hidden;
237
+ /* 强制统一行高，确保主表和固定列对齐 */
238
+ ::v-deep .ant-table-tbody > tr > td {
239
+ height: 54px;
240
+ padding: 8px 16px;
241
+ vertical-align: middle;
242
+ box-sizing: border-box;
278
243
  }
279
244
 
280
- ::v-deep .ant-table-scroll {
281
- height: 100%;
282
- display: flex;
283
- flex-direction: column;
245
+ /* 固定列使用相同的行高 */
246
+ ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {
247
+ height: 54px;
248
+ padding: 8px 16px;
249
+ vertical-align: middle;
250
+ box-sizing: border-box;
284
251
  }
285
252
 
286
- ::v-deep .ant-table-header {
287
- flex: 0 0 auto;
288
- overflow: hidden;
289
- }
290
- ::v-deep .ant-table-fixed {
291
- .ant-table-tbody {
292
- .g-table__row--odd {
293
- &.ant-table-row-hover {
294
- td {
295
- background-color: var(--idooel-row-hover-color);
296
- }
297
- .ant-table-selection-column {
298
- background-color: var(--idooel-row-hover-color) !important;
299
- }
300
- .ant-table-row-cell-break-word {
301
- background-color: var(--idooel-row-hover-color) !important;
302
- }
303
- }
304
- td {
305
- background-color: var(--idooel-row-odd-color);
306
- }
307
- .ant-table-selection-column {
308
- background-color: var(--idooel-row-odd-color) !important;
309
- }
310
- .ant-table-row-cell-break-word {
311
- background-color: var(--idooel-row-odd-color) !important;
312
- }
313
- }
314
- }
315
- .ant-table-thead {
316
- background: rgba(0, 0, 0, 0.03) !important;
317
- }
253
+ /* 表头也统一高度 */
254
+ ::v-deep .ant-table-thead > tr > th {
255
+ height: 54px;
256
+ padding: 8px 16px;
257
+ vertical-align: middle;
258
+ box-sizing: border-box;
318
259
  }
319
260
 
320
- ::v-deep .ant-table-body {
321
- flex: 1 1 auto;
322
- overflow: auto !important;
323
- /* 确保滚动条稳定，避免列宽抖动 */
324
- scrollbar-gutter: stable;
261
+ ::v-deep .ant-table-fixed .ant-table-thead > tr > th {
262
+ height: 54px;
263
+ padding: 8px 16px;
264
+ vertical-align: middle;
265
+ box-sizing: border-box;
325
266
  }
326
267
 
327
- /* 分页区域固定在底部，不被挤出视口 */
268
+ /* 分页区域固定在底部 */
328
269
  .g-table__pagination {
329
- flex: 0 0 auto;
330
270
  display: flex;
331
271
  flex-direction: row;
332
272
  justify-content: end;
@@ -334,7 +274,6 @@ export default {
334
274
  padding-top: 8px;
335
275
  padding-bottom: 8px;
336
276
  background: #fff;
337
- z-index: 999;
338
277
  }
339
278
 
340
279
  /* 空数据状态顶部显示 */