VUE页面表格数据多卡顿用虚拟表单

情景概况：页面表格想要通过滚动条展示非常多的数据，后端返回接口很快。

解决方法：虚拟滚动  vue + vxe-table

20220708_145309

element ui 表单已经不能满足这个需求，二次封装也很麻烦，所以推荐用现有插件vxetable

插件地址：vxe-table v4

第一步： 安装，右上角选择需要的版本

 根据指南安装（选择版本后再npi，不然会出现未知错误）

第二步： 找到使用需要使用的功能，我这里以横向&纵向为例

第三步：直接上代码，根据需要API里面查找

<template>
  <div>
    <vxe-grid
      show-header-overflow
      border
      show-overflow
      :scroll-y="{ gt: 0 }"
      :scroll-x="{ gt: 0 }"
      ref="xGrid"
      :column-config="{ minWidth: '200' }"
      height="500"
    >
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableColumn: [],
      tableData: [],
    };
  },
  created() {
    for (let i = 0; i < 100; i++) {
      this.tableColumn.push({ field: "name", title: "Name"  + i},);
      this.tableData.push({ id: i, name: "Test1" })
    }
  },
  mounted() {
    this.loadColumnAndData();
  },
  methods: {
    loadColumnAndData() {
      const startTime = Date.now();
      const xGrid = this.$refs.xGrid;
      // 使用函数式加载，阻断 vue 对大数组的双向绑定
      if (xGrid) {
        Promise.all([
          xGrid.reloadColumn(this.tableColumn),
          xGrid.reloadData(this.tableData),
        ]).then(() => {
          this.$XModal.message({
            message: `渲染用时 ${Date.now() - startTime}毫秒`,
            status: "info",
          });
        });
      }
    },
  },
};
</script>

<style >
</style>

开启虚拟滚动

:scroll-y="{ gt: 0 }"
:scroll-x="{ gt: 0 }"

第四步：渲染

由于普通渲染是双向绑定，我们可以选择单方向输入，页面会流畅很多

 下面是数据结构和渲染体

tableStructure: [  // 表头结构
  {
    title: "Name",
    children: [
      { field: "name", title: "名称" },
      { field: "age", title: "年龄", sortable: true },
    ],
  },
  { field: "name", title: "Name" },
],
tableData: [ // 数据结构
  {name: '张三', age: 18}
],


const startTime = Date.now();
const xGrid = this.$refs.xGrid;
// 使用函数式加载，阻断 vue 对大数组的双向绑定
if (xGrid) {
  Promise.all([
    xGrid.reloadColumn(this.tableColumn), // 渲染表头
    xGrid.reloadData(this.tableData),  // 渲染数据
  ]).then(() => {
    this.$XModal.message({
      message: `渲染用时 ${Date.now() - startTime}毫秒`,
      status: "info",
    });
  });
}