<main> <slot></slot> <container> <slot></slot> <content> <!-- Your items here --> </content> <slot></slot> </container> <slot></slot> </main>
这些 slot 都可以放置自定义内容。container 会被 container-tag 属性值替换，默认是div，content 被 content-tag 值替换。
这里用 before-content slot 加一个thead 就行了：
<template> <virtual-scroller :items="items" item-height="40" 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>
请注意，我们把content-tag="table" 改成了content-tag="tbody"，因为我们设置了container-tag="table"，这是为了构造table 标签的常规结构。
如果要加一个 tfoot，应该知道怎么做了吧。
总结
我们了解了无限滚动列表的性能优化原理，以及利用vue-virtual-scroller Vue 插件创建了 VirtualList 和 VirtualTable 组件。如果用它们来展示前面生成的 5000 条数据，应该可以比较流畅地渲染和滚动了。更多用法可以参考 vue-virtual-scroller 文档 。
文章涉及的源码 戳这里。