@idooel/components 0.0.1-beta.57 → 0.0.1-beta.59

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 +23 -10
  2. package/dist/@idooel/components.umd.js +23 -10
  3. package/package.json +1 -1
  4. package/packages/table/src/index.vue +43 -15
package/dist/@idooel/components.esm.js CHANGED
@@ -1746,7 +1746,8 @@ var script$w = {
1746
1746
  innerPageSize: 10,
1747
1747
  innerCurrentPage: 1,
1748
1748
  tableContentHeight: 0,
1749
- obs: []
1749
+ obs: [],
1750
+ tableTbodyHeight: 0
1750
1751
  };
1751
1752
  },
1752
1753
  computed: {
@@ -1765,7 +1766,17 @@ var script$w = {
1765
1766
  return `${this.height - this.paginationHeight - 16}px`;
1766
1767
  },
1767
1768
  getScrollHeightByHeight() {
1768
- if (this.height > this.tableContentHeight) {
1769
+ const height = this.height - this.tableHeaderHeight - this.paginationHeight;
1770
+ if (height > this.tableTbodyHeight) {
1771
+ document.querySelector('.ant-table-content').style.height = 'inherit';
1772
+ document.querySelector('.ant-table-scroll').style.height = 'inherit';
1773
+ document.querySelector('.ant-table-body').style.height = 'inherit';
1774
+ if (this.tableTbodyHeight > height) {
1775
+ document.querySelector('.ant-table-content').style.height = 'auto';
1776
+ document.querySelector('.ant-table-scroll').style.height = 'auto';
1777
+ document.querySelector('.ant-table-body').style.height = 'auto';
1778
+ }
1779
+ // 0的时候没有y滚动条
1769
1780
  return 0;
1770
1781
  }
1771
1782
  return this.height - this.tableHeaderHeight - this.paginationHeight;
@@ -1785,7 +1796,7 @@ var script$w = {
1785
1796
  }
1786
1797
  return {
1787
1798
  x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
1788
- y: this.height > this.tableContentHeight ? 0 : this.y
1799
+ y: this.y
1789
1800
  };
1790
1801
  }
1791
1802
  }
@@ -1814,14 +1825,16 @@ var script$w = {
1814
1825
  },
1815
1826
  setTableHeaderHeight() {
1816
1827
  this.$nextTick(() => {
1828
+ const el = document.querySelector('.ant-table-header');
1829
+ if (!el) return;
1817
1830
  const {
1818
1831
  height
1819
- } = document.querySelector('.ant-table-header').getBoundingClientRect();
1832
+ } = el.getBoundingClientRect();
1820
1833
  this.tableHeaderHeight = height;
1821
1834
  });
1822
1835
  },
1823
- setTableContentHeight() {
1824
- const el = document.querySelector('.ant-table-content');
1836
+ setTableTbodyHeight() {
1837
+ const el = document.querySelector('.ant-table-tbody');
1825
1838
  const ob = new ResizeObserver(entries => {
1826
1839
  if (this.tableHeaderHeight) return;
1827
1840
  for (const _ of entries) {
@@ -1829,7 +1842,7 @@ var script$w = {
1829
1842
  const {
1830
1843
  height
1831
1844
  } = el.getBoundingClientRect();
1832
- this.tableContentHeight = height;
1845
+ this.tableTbodyHeight = height;
1833
1846
  this.setTableHeaderHeight();
1834
1847
  });
1835
1848
  }
@@ -1847,7 +1860,7 @@ var script$w = {
1847
1860
  }
1848
1861
  },
1849
1862
  mounted() {
1850
- this.setTableContentHeight();
1863
+ this.setTableTbodyHeight();
1851
1864
  this.setPaginationHeight();
1852
1865
  },
1853
1866
  destroyed() {
@@ -1931,11 +1944,11 @@ __vue_render__$w._withStripped = true;
1931
1944
  /* style */
1932
1945
  const __vue_inject_styles__$w = function (inject) {
1933
1946
  if (!inject) return
1934
- inject("data-v-c4b1ea92_0", { source: ".g-table__wrapper[data-v-c4b1ea92] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-c4b1ea92] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-c4b1ea92] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAoMA;EAyEA,aAAA;EACA,kBAAA;AC3QA;ADkMA;EACA,eAAA;AChMA;ADiMA;EACA,eAAA;AC/LA;ADgMA;EACA,eAAA;AC9LA;ADmMA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACjMA;ADoMA;EACA,iDAAA;AClMA;ADuMA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACrMA;ADyMA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACvMA;ADyMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACvMA;ADwMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACtMA;ADyMA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC5MA;ADqMA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACnMA;ADwMA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACtMA;AD4MA;EACA,wCAAA;AC1MA;AD4MA;EACA,uCAAA;AC1MA;AD4MA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC1MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\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 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 </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 // 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,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\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 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 noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n if (this.height > this.tableContentHeight) {\r\n return 0\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 if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }\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 { 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 { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableContentHeight () {\r\n const el = document.querySelector('.ant-table-content')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableContentHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\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.setTableContentHeight()\r\n this.setPaginationHeight()\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 ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
1947
+ inject("data-v-346c30e0_0", { source: ".g-table__wrapper[data-v-346c30e0] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-346c30e0] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-346c30e0] {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 9999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiNA;EAuFA,aAAA;EACA,kBAAA;ACtSA;AD+MA;EACA,eAAA;AC7MA;AD+MA;EACA,gBAAA;AC7MA;ADgNA;EACA,eAAA;AC9MA;AD+MA;EACA,eAAA;AC7MA;AD2NA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACzNA;AD4NA;EACA,iDAAA;AC1NA;AD+NA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;AC7NA;ADsOA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACpOA;ADqOA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACnOA;ADqOA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACnOA;ADqOA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACnOA;ADuOA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACrOA;AD0OA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACxOA;AD8OA;EACA,wCAAA;AC5OA;AD8OA;EACA,uCAAA;AC5OA;AD8OA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,aAAA;AC5OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\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 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 </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 // 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,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\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 tableTbodyHeight: 0\r\n }\r\n },\r\n computed: {\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 noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n const height = this.height - this.tableHeaderHeight - this.paginationHeight\r\n if (height > this.tableTbodyHeight) {\r\n document.querySelector('.ant-table-content').style.height = 'inherit'\r\n document.querySelector('.ant-table-scroll').style.height = 'inherit'\r\n document.querySelector('.ant-table-body').style.height = 'inherit'\r\n if (this.tableTbodyHeight > height) {\r\n document.querySelector('.ant-table-content').style.height = 'auto'\r\n document.querySelector('.ant-table-scroll').style.height = 'auto'\r\n document.querySelector('.ant-table-body').style.height = 'auto'\r\n }\r\n // 0的时候没有y滚动条\r\n return 0\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 if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.y }\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 { 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 const el = document.querySelector('.ant-table-tbody')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableTbodyHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\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.setTableTbodyHeight()\r\n this.setPaginationHeight()\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 ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-table-fixed-header {\r\n .ant-table-body-inner {\r\n overflow: hidden;\r\n }\r\n }\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n .ant-table-content {\r\n // height: inherit;\r\n // .ant-table-scroll {\r\n // height: inherit;\r\n // .ant-table-body {\r\n // height: inherit;\r\n // }\r\n // }\r\n }\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n // border-top-width: calc(var(--idooel-border-width) * 1px);\r\n // border-top-style: solid;\r\n // border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n // border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n // border-bottom-style: solid;\r\n // border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n position: relative;\r\n z-index: 9999;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 9999;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
1935
1948
 
1936
1949
  };
1937
1950
  /* scoped */
1938
- const __vue_scope_id__$w = "data-v-c4b1ea92";
1951
+ const __vue_scope_id__$w = "data-v-346c30e0";
1939
1952
  /* module identifier */
1940
1953
  const __vue_module_identifier__$w = undefined;
1941
1954
  /* functional template */
package/dist/@idooel/components.umd.js CHANGED
@@ -1753,7 +1753,8 @@
1753
1753
  innerPageSize: 10,
1754
1754
  innerCurrentPage: 1,
1755
1755
  tableContentHeight: 0,
1756
- obs: []
1756
+ obs: [],
1757
+ tableTbodyHeight: 0
1757
1758
  };
1758
1759
  },
1759
1760
  computed: {
@@ -1772,7 +1773,17 @@
1772
1773
  return `${this.height - this.paginationHeight - 16}px`;
1773
1774
  },
1774
1775
  getScrollHeightByHeight() {
1775
- if (this.height > this.tableContentHeight) {
1776
+ const height = this.height - this.tableHeaderHeight - this.paginationHeight;
1777
+ if (height > this.tableTbodyHeight) {
1778
+ document.querySelector('.ant-table-content').style.height = 'inherit';
1779
+ document.querySelector('.ant-table-scroll').style.height = 'inherit';
1780
+ document.querySelector('.ant-table-body').style.height = 'inherit';
1781
+ if (this.tableTbodyHeight > height) {
1782
+ document.querySelector('.ant-table-content').style.height = 'auto';
1783
+ document.querySelector('.ant-table-scroll').style.height = 'auto';
1784
+ document.querySelector('.ant-table-body').style.height = 'auto';
1785
+ }
1786
+ // 0的时候没有y滚动条
1776
1787
  return 0;
1777
1788
  }
1778
1789
  return this.height - this.tableHeaderHeight - this.paginationHeight;
@@ -1792,7 +1803,7 @@
1792
1803
  }
1793
1804
  return {
1794
1805
  x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
1795
- y: this.height > this.tableContentHeight ? 0 : this.y
1806
+ y: this.y
1796
1807
  };
1797
1808
  }
1798
1809
  }
@@ -1821,14 +1832,16 @@
1821
1832
  },
1822
1833
  setTableHeaderHeight() {
1823
1834
  this.$nextTick(() => {
1835
+ const el = document.querySelector('.ant-table-header');
1836
+ if (!el) return;
1824
1837
  const {
1825
1838
  height
1826
- } = document.querySelector('.ant-table-header').getBoundingClientRect();
1839
+ } = el.getBoundingClientRect();
1827
1840
  this.tableHeaderHeight = height;
1828
1841
  });
1829
1842
  },
1830
- setTableContentHeight() {
1831
- const el = document.querySelector('.ant-table-content');
1843
+ setTableTbodyHeight() {
1844
+ const el = document.querySelector('.ant-table-tbody');
1832
1845
  const ob = new ResizeObserver(entries => {
1833
1846
  if (this.tableHeaderHeight) return;
1834
1847
  for (const _ of entries) {
@@ -1836,7 +1849,7 @@
1836
1849
  const {
1837
1850
  height
1838
1851
  } = el.getBoundingClientRect();
1839
- this.tableContentHeight = height;
1852
+ this.tableTbodyHeight = height;
1840
1853
  this.setTableHeaderHeight();
1841
1854
  });
1842
1855
  }
@@ -1854,7 +1867,7 @@
1854
1867
  }
1855
1868
  },
1856
1869
  mounted() {
1857
- this.setTableContentHeight();
1870
+ this.setTableTbodyHeight();
1858
1871
  this.setPaginationHeight();
1859
1872
  },
1860
1873
  destroyed() {
@@ -1938,11 +1951,11 @@
1938
1951
  /* style */
1939
1952
  const __vue_inject_styles__$w = function (inject) {
1940
1953
  if (!inject) return
1941
- inject("data-v-c4b1ea92_0", { source: ".g-table__wrapper[data-v-c4b1ea92] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-c4b1ea92] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-c4b1ea92] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAoMA;EAyEA,aAAA;EACA,kBAAA;AC3QA;ADkMA;EACA,eAAA;AChMA;ADiMA;EACA,eAAA;AC/LA;ADgMA;EACA,eAAA;AC9LA;ADmMA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACjMA;ADoMA;EACA,iDAAA;AClMA;ADuMA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACrMA;ADyMA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACvMA;ADyMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACvMA;ADwMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACtMA;ADyMA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC5MA;ADqMA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACnMA;ADwMA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACtMA;AD4MA;EACA,wCAAA;AC1MA;AD4MA;EACA,uCAAA;AC1MA;AD4MA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC1MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\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 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 </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 // 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,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\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 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 noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n if (this.height > this.tableContentHeight) {\r\n return 0\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 if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }\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 { 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 { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableContentHeight () {\r\n const el = document.querySelector('.ant-table-content')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableContentHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\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.setTableContentHeight()\r\n this.setPaginationHeight()\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 ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
1954
+ inject("data-v-346c30e0_0", { source: ".g-table__wrapper[data-v-346c30e0] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-346c30e0] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-346c30e0] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-346c30e0] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-346c30e0] {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 9999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiNA;EAuFA,aAAA;EACA,kBAAA;ACtSA;AD+MA;EACA,eAAA;AC7MA;AD+MA;EACA,gBAAA;AC7MA;ADgNA;EACA,eAAA;AC9MA;AD+MA;EACA,eAAA;AC7MA;AD2NA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACzNA;AD4NA;EACA,iDAAA;AC1NA;AD+NA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;AC7NA;ADsOA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACpOA;ADqOA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACnOA;ADqOA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACnOA;ADqOA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACnOA;ADuOA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACrOA;AD0OA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACxOA;AD8OA;EACA,wCAAA;AC5OA;AD8OA;EACA,uCAAA;AC5OA;AD8OA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,aAAA;AC5OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\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 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 </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 // 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,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\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 tableTbodyHeight: 0\r\n }\r\n },\r\n computed: {\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 noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n const height = this.height - this.tableHeaderHeight - this.paginationHeight\r\n if (height > this.tableTbodyHeight) {\r\n document.querySelector('.ant-table-content').style.height = 'inherit'\r\n document.querySelector('.ant-table-scroll').style.height = 'inherit'\r\n document.querySelector('.ant-table-body').style.height = 'inherit'\r\n if (this.tableTbodyHeight > height) {\r\n document.querySelector('.ant-table-content').style.height = 'auto'\r\n document.querySelector('.ant-table-scroll').style.height = 'auto'\r\n document.querySelector('.ant-table-body').style.height = 'auto'\r\n }\r\n // 0的时候没有y滚动条\r\n return 0\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 if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.y }\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 { 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 const el = document.querySelector('.ant-table-tbody')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableTbodyHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\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.setTableTbodyHeight()\r\n this.setPaginationHeight()\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 ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-table-fixed-header {\r\n .ant-table-body-inner {\r\n overflow: hidden;\r\n }\r\n }\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n .ant-table-content {\r\n // height: inherit;\r\n // .ant-table-scroll {\r\n // height: inherit;\r\n // .ant-table-body {\r\n // height: inherit;\r\n // }\r\n // }\r\n }\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n // border-top-width: calc(var(--idooel-border-width) * 1px);\r\n // border-top-style: solid;\r\n // border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n // border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n // border-bottom-style: solid;\r\n // border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n position: relative;\r\n z-index: 9999;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 9999;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
1942
1955
 
1943
1956
  };
1944
1957
  /* scoped */
1945
- const __vue_scope_id__$w = "data-v-c4b1ea92";
1958
+ const __vue_scope_id__$w = "data-v-346c30e0";
1946
1959
  /* module identifier */
1947
1960
  const __vue_module_identifier__$w = undefined;
1948
1961
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idooel/components",
3
- "version": "0.0.1-beta.57",
3
+ "version": "0.0.1-beta.59",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "dist/@idooel/components.umd.js",
package/packages/table/src/index.vue CHANGED
@@ -95,7 +95,8 @@ export default {
95
95
  innerPageSize: 10,
96
96
  innerCurrentPage: 1,
97
97
  tableContentHeight: 0,
98
- obs: []
98
+ obs: [],
99
+ tableTbodyHeight: 0
99
100
  }
100
101
  },
101
102
  computed: {
@@ -114,7 +115,17 @@ export default {
114
115
  return `${this.height - this.paginationHeight - 16}px`
115
116
  },
116
117
  getScrollHeightByHeight () {
117
- if (this.height > this.tableContentHeight) {
118
+ const height = this.height - this.tableHeaderHeight - this.paginationHeight
119
+ if (height > this.tableTbodyHeight) {
120
+ document.querySelector('.ant-table-content').style.height = 'inherit'
121
+ document.querySelector('.ant-table-scroll').style.height = 'inherit'
122
+ document.querySelector('.ant-table-body').style.height = 'inherit'
123
+ if (this.tableTbodyHeight > height) {
124
+ document.querySelector('.ant-table-content').style.height = 'auto'
125
+ document.querySelector('.ant-table-scroll').style.height = 'auto'
126
+ document.querySelector('.ant-table-body').style.height = 'auto'
127
+ }
128
+ // 0的时候没有y滚动条
118
129
  return 0
119
130
  }
120
131
  return this.height - this.tableHeaderHeight - this.paginationHeight
@@ -129,7 +140,7 @@ export default {
129
140
  if (this.height) {
130
141
  return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }
131
142
  }
132
- return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }
143
+ return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.y }
133
144
  }
134
145
  }
135
146
  },
@@ -155,18 +166,20 @@ export default {
155
166
  },
156
167
  setTableHeaderHeight () {
157
168
  this.$nextTick(() => {
158
- const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()
169
+ const el = document.querySelector('.ant-table-header')
170
+ if (!el) return
171
+ const { height } = el.getBoundingClientRect()
159
172
  this.tableHeaderHeight = height
160
173
  })
161
174
  },
162
- setTableContentHeight () {
163
- const el = document.querySelector('.ant-table-content')
175
+ setTableTbodyHeight () {
176
+ const el = document.querySelector('.ant-table-tbody')
164
177
  const ob = new ResizeObserver((entries => {
165
178
  if (this.tableHeaderHeight) return
166
179
  for (const _ of entries) {
167
180
  requestAnimationFrame(() => {
168
181
  const { height } = el.getBoundingClientRect()
169
- this.tableContentHeight = height
182
+ this.tableTbodyHeight = height
170
183
  this.setTableHeaderHeight()
171
184
  })
172
185
  }
@@ -184,7 +197,7 @@ export default {
184
197
  }
185
198
  },
186
199
  mounted() {
187
- this.setTableContentHeight()
200
+ this.setTableTbodyHeight()
188
201
  this.setPaginationHeight()
189
202
  },
190
203
  destroyed () {
@@ -197,10 +210,24 @@ export default {
197
210
  .g-table__wrapper {
198
211
  ::v-deep .ant-spin-nested-loading {
199
212
  height: inherit;
213
+ .ant-table-fixed-header {
214
+ .ant-table-body-inner {
215
+ overflow: hidden;
216
+ }
217
+ }
200
218
  .ant-spin-container {
201
219
  height: inherit;
202
220
  .ant-table {
203
221
  height: inherit;
222
+ .ant-table-content {
223
+ // height: inherit;
224
+ // .ant-table-scroll {
225
+ // height: inherit;
226
+ // .ant-table-body {
227
+ // height: inherit;
228
+ // }
229
+ // }
230
+ }
204
231
  }
205
232
  }
206
233
  }
@@ -227,9 +254,9 @@ export default {
227
254
  }
228
255
  }
229
256
  .ant-table-body {
230
- border-top-width: calc(var(--idooel-border-width) * 1px);
231
- border-top-style: solid;
232
- border-top-color: var(--idooel-border-color);
257
+ // border-top-width: calc(var(--idooel-border-width) * 1px);
258
+ // border-top-style: solid;
259
+ // border-top-color: var(--idooel-border-color);
233
260
  }
234
261
  .ant-table-fixed-left {
235
262
  border-bottom-width: calc(var(--idooel-border-width) * 1px);
@@ -257,9 +284,9 @@ export default {
257
284
  border-bottom-color: var(--idooel-border-color);
258
285
  border-bottom-style: solid;
259
286
  }
260
- border-bottom-width: calc(var(--idooel-border-width) * 1px);
261
- border-bottom-style: solid;
262
- border-bottom-color: var(--idooel-border-color);
287
+ // border-bottom-width: calc(var(--idooel-border-width) * 1px);
288
+ // border-bottom-style: solid;
289
+ // border-bottom-color: var(--idooel-border-color);
263
290
  .ant-table-fixed {
264
291
  border-left-width: calc(var(--idooel-border-width) * 1px);
265
292
  border-left-style: solid;
@@ -276,7 +303,6 @@ export default {
276
303
  background: var(--idooel-row-odd-color);
277
304
  }
278
305
  .g-table__pagination {
279
- /* margin-top: 8px; */
280
306
  display: flex;
281
307
  flex-direction: row;
282
308
  justify-content: end;
@@ -286,6 +312,8 @@ export default {
286
312
  border-top: unset;
287
313
  padding-top: 8px;
288
314
  padding-bottom: 8px;
315
+ position: relative;
316
+ z-index: 9999;
289
317
  }
290
318
  }
291
319
  </style>