antv表格大量数据卡顿问题(局部渲染数据)

  表格最大数据量也就500左右,再多,dom太多,浏览器会卡顿。为了解决这个问题,同时保持表格原有功能,对数据做了优化。

  特点:

  1、保留原有antv的table的所有功能(antd-react 一样的道理,这里只贴vue代码,react抄一下函数即可)

  2、数据切换流畅,无卡顿问题,头尾数据无空白问题

  3、可视区域渲染数据,条数默认15条,可配置,注意和可视高度配合

  4、写法很简单

 思路: 默认每条数据高度一样,不换行。增加一个滚动条,滚动滚动条,根据百分比,计算要展示的数据

 缺点:全选会触发2次数据的回调,这个暂时没处理;若表格换行,高度相差太大影响数据显示,需要配置合理的高度

 

 贴一下代码,有需要的自己拷贝:  ps:对分页的一些功能还没封装完,直接忽略,看核心部分即可

<template>
  <div class="c-large-table">
    <a-table
      clas
      :loading="loading"
      :columns="columns"
      :row-key="record => record.id"
      :data-source="tableData"
      :row-selection="selected ? { selectedRowKeys: selectedRowKeys, onChange: handleSelect, onSelectAll: handleSelectAll } : null"
      @change="handleTableChange"
      :pagination="pagination"
    >
      <template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>
    </a-table>
<!-- 虚拟滚动条 -->
    <div class="sc" :style="{height: tableHeight+'px'}">
      <div class="scbc" :style="{height: totalHeight+'px'}"></div>
    </div>
  </div>
</template>

<script>
const ROWS = 15,          // 局部渲染的数据条数
      HEIGHT = 29.6,      // 每行的高度
      TABLEHEIGHT = 446;  // 表格可视高度

export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      default: []
    },
    columns: {
      type: Array,
      default: []
    },
    pagination: {
      type: Object,
      default: {
        current: 1,
        pageSize: 20,
        tota: 0,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["20", "50", "100", "200", "500", "1000", "2000"]
      }
    },
    rows: {   // 可视区域展示多少行
      type: Number,
      default: ROWS
    },
    rowHeight: { // 每行的高度
      type: Number,
      default: HEIGHT
    },
    tableHeight: { // 可是区域高度
      type: Number,
      default: TABLEHEIGHT
    },
    selected: { // 是否可选
      type: Boolean,
      default: false
    },
    selectChange: { // 可选的回调
      type: Function,
    },
  },
  data() {
    return {
      scrollEle: '',
      tableData: [],
      selectedRowKeys: [],
      totalHeight: 446,  // 数据总高度
      idx: 0,            // 当前开始下标
    };
  },
  watch: {
    dataSource () {
      const { dataSource, rows, rowHeight } = this
      this.tableData = dataSource.length > rows ? dataSource.slice(0, rows) : dataSource
      this.totalHeight = dataSource.length * rowHeight
    }
  },
  created() {
    const { dataSource, rows, rowHeight } = this
    this.tableData = dataSource.length > rows ? dataSource.slice(0, rows) : dataSource
    this.totalHeight = dataSource.length * rowHeight
  },
  mounted() {
    this.scrollEle = document.querySelector('.c-large-table .sc .scbc');
    document.querySelector('.c-large-table .sc').addEventListener('scroll', this.handleScroll);
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.$emit("onShowSizeChange", current, pageSize);
    },
    pageChange(current, pageSize) {
      this.$emit("onChange", current, pageSize);
    },
    handleTableChange() {
      
    },

    handleSelect(d, dl) {
      this.selectedRowKeys = d
      if(this.selected) this.$emit("selectChange", d, dl);
    },
    // 注意全选,需要手动填充数据
    handleSelectAll(d,dl) {
      let keys = [], dates = []
      if(d) {
        keys = this.dataSource.map(item => item.id)
        dates = [...this.dataSource]
      }
      this.handleSelect(keys, dates)
    },
    // 监听虚拟滚轮变化,计算展示的数据
    handleScroll(e) {
      const { scrollTop, scrollHeight } = e.target
      let lenMax = this.dataSource.length, nIdx;

      if(scrollTop === 0) {
        this.tableData = this.dataSource.slice(0, this.rows)
        this.idx = 0
      } else if(scrollTop === (scrollHeight - this.tableHeight)) {
        nIdx = lenMax - this.rows
        this.tableData = this.dataSource.slice(nIdx, nIdx + this.rows)
        this.idx = nIdx
      } else {
        nIdx = Math.ceil(scrollTop * lenMax / scrollHeight)
        if(nIdx !== this.idx && nIdx <= (lenMax - this.rows)) {
          this.tableData = this.dataSource.slice(nIdx, nIdx + this.rows)
          this.idx = nIdx
        }
      }
    },
  },
};
</script>

<style lang="less" >
  .c-large-table {
    position: relative;
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
      padding: 4px 10px;
    }
    .sc {
      position: absolute;
      top: 28px;
      right: -6px;
      width: 16px;
      overflow-x: hidden;
      overflow-y: scroll;
      .scbc {
        border-radius: 2px;
        background-color: #F1F1F1;
      }
    }
  }
</style>

 

上一篇:基于AntV图表库的Ant DeSign Charts图表展示的简单应用


下一篇:springJDBC实现查询方法二