Vuetify3 VSimpleTable 升级到 VTable 不起作用

Question

v-simple-table 已重命名为 v-table

将 v-simple-table 重命名为 v-table 后的旧代码无法正常工作， 具有相同日期的 v-data-table 工作正常。

Full page code

此问题的示例代码

我尝试更改组件、数据源和父组件的位置。 模板->v-app->v-main...

Answer 1

关于 更简单的表组件的示例，使用 CDN 需要带有默认插槽的附加模板属性 模板 v-slot:default

之前

<v-table theme="dark">
    <thead>
      <tr>
        <th class="text-left">
          Name {{desserts.length}}
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in desserts" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
</v-table>

之后

<v-table theme="dark">
  <template v-slot:default>
    <thead>
      <tr>
        <th class="text-left">
          Name {{desserts.length}}
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in desserts" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </template>
</v-table>

结果