使用vue-virtual-scroller显示表格

遇到页面dom节点过多时vue的加载和刷新的性能就会下降的很厉害,然后就会考虑使用vue-virtual-scroller;（https://github.com/Akryum/vue-virtual-scroller）

先看一个issue：https://github.com/Akryum/vue-virtual-scroller/issues/116

v0.12.0和v1.0.0版本的差异,新版本移除了原始table的支持;

导致新版本中需要使用模拟的表格，例子https://codesandbox.io/s/pwlrzmjjk7

版本:("vue-virtual-scroller": "1.0.0-rc.2")

VirtualTable.vue

<template>
<div>
<RecycleScroller :items="items" :item-size="32" key-field="_id">
<template slot="before">
<div :key="header" class="th" v-for="header in headers">
{{ header }}
</div>
</template>
<template slot-scope="{ item }">
<div class="td">{{ item.name }}</div>
<div class="td">{{ item.age }}</div>
<div class="td">{{ item.company }}</div>
</template>
</RecycleScroller>
</div>
</template>

<script>
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import items from "./data.json";

export default {
components: {
RecycleScroller
},
data: () => ({
items: items.slice(0, 1000),
headers: ["Age", "Name", "Company"]
})
};
</script>

<style>
.scroller {
height: 100vh;
}
.vue-recycle-scroller__slot,
.vue-recycle-scroller__item-view {
display: flex;
width: 100%;
}
.th,
.td {
flex: 1;
}
.vue-recycle-scroller__slot .th:first-child,
.vue-recycle-scroller__item-view .td:first-child {
flex: 2;
}
</style>

对比于旧版本,例子https://codesandbox.io/s/jnxyxr21lv

版本:"vue-virtual-scroller": "0.11.5"

VirtualTable.vue

<template>
<virtual-scroller :items="items" item-height="42" container-tag="table" content-tag="tbody">
<thead slot="before-content">
<tr>
<td>Age</td>
<td>Name</td>
<td>Company</td>
</tr>
</thead>
<template slot-scope="props">
<tr :key="props.itemKey">
<td>{{props.item.age}}</td>
<td>{{props.item.name}}</td>
<td>{{props.item.company}}</td>
</tr>
</template>
</virtual-scroller>
</template>

<script>
import items from "./data.json";

export default {
data: () => ({
items
})
};
</script>

main.js

import VueVirtualScroller from "vue-virtual-scroller";
Vue.use(VueVirtualScroller);

参考：

https://alligator.io/vuejs/vue-virtual-scroller/

也可以考虑后端渲染（https://github.com/vuejsdevelopers/blog/wiki/Pre-Render-A-Vue.js-App-(With-Node-Or-Laravel)）,我这次的场景是一个静态服务器，弱后端的情况，所以不太适用;