我正在开发一个 Vue 组件,该组件完成后将发布,该组件包装了Clusterize.js(有一个 vue-clusterize 组件,但它仅适用于 v1.x)。我想要实现的是使用 Vue 快速渲染大量项目。我实际上需要它来一张桌子。我尝试使用vue-virtual-scroll但它不支持表格并且性能不是很好。所以我想尝试使用 Clusterize.js。
因为我希望这个组件具有高度可配置性,所以我决定您将能够为您将在其中接收项目的项目列表的每一行提供一个作用域插槽。问题是,当我尝试在安装组件之前将集群组件中的范围插槽分配给每一行时,它不起作用。
这里有我的一些代码片段(它只是一个 mvp)
集群化.vue
模板
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div
ref="scroll"
class="clusterize-scroll">
<table>
<tbody
ref="content"
class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading...</td>
</tr>
</tbody>
</table>
</div>
Run Code Online (Sandbox Code Playgroud)
脚本
import Vue from 'vue';
import Clusterize from 'clusterize.js';
export default {
name: 'Clusterize',
props: {
items: {
type: Array,
required: true,
},
},
data() {
return {
clusterize: null,
};
},
computed: {
rows() {
return …Run Code Online (Sandbox Code Playgroud)