vue antd长列表卡顿懒加载优化

程序员Linda

于 2023-03-20 20:06:13 发布

阅读量914

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45231437/article/details/129674945

版权

该代码示例展示了如何在Vue.js应用中使用A-Table组件进行数据展示，实现表格滚动时动态加载更多数据和分页功能。通过监听滚动事件，计算新的数据范围并更新表格内容。

摘要由CSDN通过智能技术生成

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

<script>
export default {
  data() {
    return {
      scrollPage: 1,
      treePageSize: 10,
      xnTable: [],
      tableData: [],
      startIndex: 0,
      selectedRows: [],
      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.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",
        });
      }
      debugger;
      this.xnTable = this.tableData.slice(this.startIndex, this.startIndex + 10);
    },

    tableScroll() {
      let target = this.$refs.tableRef.$el.querySelector(".ant-table-body");

      const scrollHeight = target.scrollHeight - target.scrollTop;
      const clientHeight = target.clientHeight;
      if (scrollHeight === 0 && clientHeight === 0) {
        this.scrollPage = 1;
      } else {
        if (scrollHeight < clientHeight + 5) {
          this.scrollPage = this.scrollPage + 1;
          const scrollPage = this.scrollPage;
          const treePageSize = this.treePageSize * (scrollPage || 1);
          const newData = [];
          let max = "";
          if (this.tableData.length > treePageSize) {
            max = treePageSize;
          } else {
            max = this.tableData.length;
          }
          this.tableData.forEach((item, index) => {
            if (index < max) {
              newData.push(item);
            }
          });
          this.xnTable = newData;
        }
      }

      // debugger;

      // 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.xnTable.push(
      //     this.tableData.slice(this.startIndex, this.startIndex + 9)
      //   );
      //   debugger
      //   // this.loadData();
      // }
    },
  },
};
</script>
<style lang="less" scoped>
</style>