avue-crud 大数据下拉加载

官网：https://avuejs.com/crud/api-crud-big/

<template>
  <avue-crud :data="filteredData" v-loadmore="handelLoadmore" :option="option" :data-size="tableData.length" ></avue-crud>
</template>
<script>
import {getInspectionEquipmentPage} from "@/api/ly/inspectionEquipment";
export default {
  data() {
    return {
      tableData: [],
      option:{
        height:300,
        expand:true,
        selection:true,
        selectionFixed:false,
        expandFixed:false,
        menuFixed:false,
        column:[{
          label: "物料编号",
          prop: "id",
          hide: false,
          overHidden: true,
          search: true,
          order: 1, //form表单排序
          showColumn: true, //参与自定义列显隐
          span: 24,
          rules: [],
        },
          {
            label: "编号",
            showColumn: true,
            prop: "sernr",
            search: false,
            hide: true,
            overHidden: true,
            span: 24,
            rules: [],
          },
          {
            label: "检验批号",
            prop: "prueflos",
            order: 2, //form表单排序
            showColumn: true, //参与自定义列显隐
            search: true,
            overHidden: true,
            span: 24,
            rules: [],
          },]
      },
      currentStartIndex: 0,
      currentEndIndex: 20,
      gdFlag:false,
      total:0,
      query:{
        pageNo:1,
        pageSize:30,
      },
    };
  },

  directives:{
    loadmore:{
      componentUpdated: function (el, binding, vnode, oldVnode){
        vnode.context.zx(el, binding, vnode, oldVnode);
      }
    }
  },
  created() {
    this.getTableData();
  },
  computed: {
    filteredData() {
      let list = this.tableData.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false;
        } else if (index > this.currentEndIndex) {
          return false;
        } else {
          return true;
        }
      });
      return list
    }
  },
  methods: {
    zx(el, binding, vnode, oldVnode){
      // 设置默认溢出显示数量
      var spillDataNum = 0;
      let that = vnode.context;

      // 设置隐藏函数
      var timeout = false;
      let setRowDisableNone = function (topNum, showRowNum, binding) {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
        });
      };
      setTimeout(() => {
        const dataSize = vnode.data.attrs['data-size'];
        const oldDataSize = oldVnode.data.attrs['data-size'];
        if (dataSize === oldDataSize) return;
        const selectWrap = el.querySelector('.el-table__body-wrapper');
        const selectTbody = selectWrap.querySelector('table tbody');
        const selectRow = selectWrap.querySelector('table tr');
        if (!selectRow) {
          return;
        }
        const rowHeight = selectRow.clientHeight;
        let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);

        const createElementTR = document.createElement('tr');
        let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
        createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
        selectTbody.append(createElementTR);

        // 监听滚动后事件
        selectWrap.addEventListener('scroll', function () {
          let topPx = this.scrollTop - spillDataNum * rowHeight;
          let topNum = Math.round(topPx / rowHeight);
          let minTopNum = dataSize - spillDataNum - showRowNum;

          if (topNum > minTopNum) {
            topNum = minTopNum;
          }
          if (topNum < 0) {
            topNum = 0;
            topPx = 0;
          }
          selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
          createElementTR.setAttribute('style', `height: ${createElementTRHeight - topPx > 0 ? createElementTRHeight - topPx : 0}px;`);
          setRowDisableNone(topNum, showRowNum, binding);

          var scrollTop = this.scrollTop;
          var windowHeight = selectWrap.clientHeight;
          var scrollHeight = selectWrap.scrollHeight;
          if (scrollTop + windowHeight == scrollHeight && scrollHeight > windowHeight) {
            if (that.tableData.length < that.total && !that.gdFlag) {
              that.gdFlag = true;
              that.query.pageNo++;
              that.getTableData();
            }
          }
        })
      })
    },
    handelLoadmore(currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex;
      this.currentEndIndex = currentEndIndex;
    },
    getTableData(a) {
      // 执行查询
      getInspectionEquipmentPage(this.query).then((response) => {
        if (this.gdFlag) {
          //下拉加载
          this.tableData = this.tableData.concat(response.data.list);
        } else {
          this.tableData = response.data.list;
        }
        console.log(this.tableData)
        this.gdFlag = false;
        this.total = response.data.total;
      });
    }
  }
}
</script>