From 9e8ab926003e5d2968372f1c3099c16c1018ec17 Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Tue, 7 Feb 2023 01:49:43 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=BB=BA=20custom-table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom-table/.keep | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/custom-table/.keep

diff --git a/src/components/custom-table/.keep b/src/components/custom-table/.keep
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From e7909299fe88355d2f70a0eac0a05f52f58b92fe Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Tue, 7 Feb 2023 01:54:05 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AF=B9=E7=BB=84=E4=BB=B6=E5=BA=93?=
 =?UTF-8?q?=E7=9A=84=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Dong Xia <dev12301@linx-info.com>
---
 src/components/custom-table/index.vue | 136 ++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 src/components/custom-table/index.vue

diff --git a/src/components/custom-table/index.vue b/src/components/custom-table/index.vue
new file mode 100644
index 0000000..d4d0282
--- /dev/null
+++ b/src/components/custom-table/index.vue
@@ -0,0 +1,136 @@
+<script>
+export default {
+  name: 'CustomTable',
+  props: {
+    dataSource: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    scrollX: {
+      type: Number,
+      default: 500
+    },
+    pagination: {
+      type: [Boolean, Object],
+      default() {
+        return {
+          current: 1,
+          size: 10,
+          total: 0
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      tableHeight: 0,
+      toTimer: null,
+      ivTimer: null
+    }
+  },
+  watch: {
+    dataSource: {
+      handler(val) {
+        if (this.ivTimer != null) {
+          clearInterval(this.ivTimer)
+          this.ivTimer == null
+        }
+        const tbody = document.querySelector('.ant-table-body')
+        let top = tbody.scrollTop || 0
+        this.ivTimer = setInterval(() => {
+          top -= 30
+          if (top < 0) {
+            top = 0
+            clearInterval(this.ivTimer)
+            this.ivTimer = null
+          }
+          tbody.scrollTo(0, top)
+        }, 10)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getTableHeight()
+    window.addEventListener('resize', this.getTableHeight)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getTableHeight)
+  },
+  methods: {
+    getTableHeight() {
+      if (this.toTimer != null) return
+      this.toTimer = setTimeout(() => {
+        const { filter, tableWrap, pagination } = this.$refs
+        this.tableHeight = tableWrap.clientHeight - (filter?.clientHeight + 11 || 0) - (pagination?.clientHeight || 0)
+        this.toTimer = null
+      }, 100)
+    },
+    pageChange(current, size) {
+      const pagination = { ...this.pagination, current, size }
+      this.$emit('on-pagination', pagination)
+    }
+  },
+  render() {
+    const { $slots, $scopedSlots, $attrs, $props, $listeners } = this
+    const props = { ...$attrs, ...$props }
+    delete props.pagination
+    return (
+      <div ref='tableWrap' class='table-wrap'>
+        {/* 搜索 */}
+        {$slots.filter && <div ref='filter' class='filter'>{this.$slots.filter}</div>}
+        {/* 表格 */}
+        <div class='table'>
+          <a-table
+            ref='table'
+            bordered
+            rowKey={(record, index) => index}
+            props={props}
+            pagination={false}
+            style={{ height: this.tableHeight + 'px' }}
+            scroll={{ x: this.scrollX, y: this.tableHeight - 55 }}
+            scopedSlots={$scopedSlots}
+            on={$listeners}
+          />
+        </div>
+        {/* 分页 */}
+        {
+          this.pagination && <div ref='pagination' class='pagination'>
+            <a-pagination
+              current={this.pagination.current}
+              pageSize={this.pagination.size}
+              pageSizeOptions={['10', '20', '30', '50']}
+              total={this.pagination.total}
+              showTotal={(total) => `共${total}条`}
+              showSizeChanger={true}
+              onChange={this.pageChange}
+              onShowSizeChange={this.pageChange}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-wrap{
+    width: 100%;
+    height: 100%;
+    .filter{
+        > span{
+            display: inline-block;
+        }
+    }
+    .pagination{
+        padding-top: 10px;
+        .ant-pagination{
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}
+</style>
-- 
Gitee