vue2.0虚拟列表组件【vue-virtual-scroller】

官网

都是English，Look不懂。
github：vue-virtual-scroller
npm：npm包地址

说明

前端界面处理巨量数据列表使用相当牛掰，我实际测试过程接近4万条数据使用input列表，瞬间展示。下面的图片中条数对应el-input的个数
这里值展示了单行单列数据，经过数据处理应该可以实现单行多列

安装

npm i vue-virtual-scroller

使用

全局注册main.js 注意加上css

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller)

局部使用

import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
components: { RecycleScroller },

页面使用

<RecycleScroller
  :items="dataList"
  :item-size="50"
  v-if="dataList.length"
  key-field="date"
  style="height: 300px;">
  <template v-slot="{ item }">
    <div>
      <el-form-item :label="item.date" label-width="150px">
        <el-input v-model="item.value" style="width: 100%"/>
      </el-form-item>
    </div>
  </template>
</RecycleScroller>

属性说明

items:数据源本身；
item-size：列表单行高度；
key-field:列表item的key默认是id，根据自己项目的数据来定；

结

这就是虚拟列表组件vue-virtual-scroller的简单使用，不说了，我再去研究研究更多的使用方法。

列表展示一行几列的思路

将一维数组改造成一组3个数值的二维数组,以便页面一行显示三列，页面上加个循环就好

<RecycleScroller
  :items="dataThree"
  :item-size="50"
  v-if="dataThree.length"
  key-field="id"
  style="height: 300px;"
>
  <template v-slot="{ item }">
    <el-row>
      <el-col :span="8" v-for="(itm,idx) in item.arr" :key="idx">
        <el-form-item :label="itm.date" label-width="150px" >
          <el-input v-model="itm.value" style="width: 100%" placeholder="数值"/>
        </el-form-item>
      </el-col>
    </el-row>
  </template>
</RecycleScroller>

chunkToThreeArray(arr, size) {
  if (!Array.isArray(arr) || size < 1) return [];

  const result = [];
  const arrayLength = Math.ceil(arr.length / size);

  let index = 0;
  for (let i = 0; i < arrayLength; i++) {
    const temp = [];
    const end = index + size;

    for (let j = index; j < end && j < arr.length; j++) {
      temp.push(arr[j]);
    }

    result.push({
      id: this.mUuid(),
      arr: temp
    });
    index = end;
  }

  return result;
},
//调用
this.chunkToThreeArray(bigDataArr,3)