用v-virtual-scroll替换v-data-table

Question

我的任务是用v-virtual-scroll替换我的v-data-table，我似乎找不到virtual-scroll的正确语法，你能帮我吗？我想要像以前一样显示，但现在有了虚拟滚动条。

  <div v-if="import_table.display">
           <v-data-table
                v-if="!hide_table"
                :headers="import_table.headers"
                :items="import_table.data"
                hide-default-footer
                :items-per-page="-1"
                dense
              > 

       <!--   <v-virtual-scroll
            :headers="import_table.headers"
            :items="import_table.data"
            v-if="!hide_table"                        ---->**thats how i replaced** 
            :item-height="50"
            height="300"
          >  -->


            <template v-slot:item="{ item, index }">
              <tr>
              <td>
            **CODE**
              </td>
              </tr>
            </template>
          </v-data-table>     <!-- </v-virtual-scroll> --> 

这可能与tr td标签有关，我尝试用v-item-content，action替换它们，但没有显示任何内容。

Answer 1

根据documentation，v-virtual-scroll没有名为item的插槽。它只有一个默认插槽。此外，它没有headers属性。

如果要在v-virtual-scroll中呈现项目，则应使用以下语法：

<v-virtual-scroll :items="items"
                  item-height="50">
  <template v-slot="{ item, index }">
    <!-- Your item content here -->
  </template>
</v-virtual-scroll>

另外，现在(Vuetify 2.3.10)还没有办法为虚拟卷轴设置标签。所以在其中使用tr和td不是有效的超文本标记语言。我建议将其显示为自定义表格。