vue.js 如何在v-table中使用v-virtual-scroll?

5sxhfpxr  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(218)

我有一个处理大量数据的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元素。
有没有人知道如何实现所期望的行为?

bfnvny8b

bfnvny8b1#

如果使用在vuetify的后续版本中添加到组件中的renderless属性,那么这个问题就解决了。
(i.e.将<v-virtual-scroll :height="500" :items="contents">更改为<v-virtual-scroll :height="500" :items="contents" renderless>并更新使用的vuetify版本,然后此工作

相关问题