<template>
  <div>
    <div style="width: 1000px">
      <a-table
        ref="tableRef"
        :scroll="{ y: 418 }"
        :data-source="sliceTable"
        :columns="columns"
        :rowKey="(row) => row.id"
        :row-selection="rowSelection"
        :pagination="false"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      startIndex: 0,
      selectedRows: [],
      vEle: undefined,
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 130,
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
          width: 130,
        },
        {
          title: "住址",
          dataIndex: "address",
          key: "address",
          width: 130,
        },
      ],
    };
  },

  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User",
            name: record.name,
          },
        }),
      };
    },
    sliceTable() {
      return this.tableData.slice(this.startIndex, this.startIndex + 9);
    },
  },

  created() {
    this.vEle = document.createElement("div");
    this.loadData();
  },

  mounted() {
    this.$refs.tableRef.$el
      .querySelector(".ant-table-body")
      .addEventListener("scroll", this.tableScroll, {
        passive: true,
      });
  },

  methods: {
    loadData() {
      for (let i = 0; i < 100000; i++) {
        this.tableData.push({
          id: i,
          name: "zhangsan" + i,
          age: 12,
          address: "china",
        });
      }
      // for (let i = start_i; i < start_i + 20; i++) {
      //   this.tableData.push({
      //     id: i,
      //     name: "zhangsan" + i,
      //     age: 12,
      //     address: "china",
      //   });
      // }
      // this.$nextTick(() => {
      //   this.$refs.tableRef.$el.querySelector(
      //     ".ant-table-tbody"
      //   ).style.position = "absolute";
      //   this.vEle.style.height = this.tableData.length * 48 + "px";
      //   this.$refs.tableRef.$el
      //     .querySelector(".ant-table-body")
      //     .appendChild(this.vEle);
      // });
    },

    tableScroll() {
      let bodyWrapperEle =
        this.$refs.tableRef.$el.querySelector(".ant-table-body");
      let scrollTop = bodyWrapperEle.scrollTop;
      this.startIndex = Math.floor(scrollTop / 48);
      bodyWrapperEle.querySelector(
        ".ant-table-tbody"
      ).style.transform = `translateY(${this.startIndex * 48}px)`;
      if (
        bodyWrapperEle.scrollHeight <=
        scrollTop + bodyWrapperEle.clientHeight
      ) {
        this.loadData();
      }
    },
  },
};
</script>
<style lang="less" scoped>
</style>