我有一个处理大量数据的Vuetify表(例如,300行,20列),许多行都带有计算的行跨度。
我想通过使用v-virtual-scroll
组件来提高性能,但此示例代码(不使用任何rowspan)
<template>
<v-app>
<v-main>
<v-table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<v-virtual-scroll :height="500" :items="contents">
<template v-slot:default="{ item }">
<tr>
<td>{{ item }}</td>
<td>{{ item }}</td>
</tr>
</template>
</v-virtual-scroll>
</tbody>
</v-table>
</v-main>
</v-app>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const contents = ref(Array(1000).fill("cell"))
</script>
字符串
显示输出不是所需的输出
的数据
我希望有1000个表行,两列并排。我认为这不会工作,因为滚动组件在表行周围 Package 了额外的DOM元素。
有没有人知道如何实现所期望的行为?
1条答案
按热度按时间bfnvny8b1#
如果使用在vuetify的后续版本中添加到组件中的
renderless
属性,那么这个问题就解决了。(i.e.将
<v-virtual-scroll :height="500" :items="contents">
更改为<v-virtual-scroll :height="500" :items="contents" renderless>
并更新使用的vuetify版本,然后此工作