将 vuetify simple-table 更改为 data-table

Question

我在 Vuetify 中有这个简单的 table，没有 headers，只有一列。如何将其更改为 vuetify v-data-table?

  <v-simple-table>
    <thead />
    <tbody>
      <tr
        v-for="item in categories"
        :key="item"
        @click="handleClick"
      >
        <td>{{ item }}</td>
        <v-switch />
      </tr>
    </tbody>
  </v-simple-table>

categories 是一个简单的字符串数组。我想将其更改为 data-table 以便更好地处理单击和选择行。

Answer 1

你可以这样改:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    categoryList: ['Category 1', 'Category 2', 'Category 3'],
  }),
  computed: {
    categoriesHeader() {
      return [
        { text: "Name", value: "name" }
      ];
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.0/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="a">
    <v-data-table :headers="categoriesHeader" :items="categoryList" item-key="id" class="elevation-1">
      <template v-slot:[`item.name`]="{ item }">
        {{ item }}
      </template>
    </v-data-table>
  </v-app>
</div>

Answer 2

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71617004-simple-to-v-data-table-bm2yn1?file=/src/components/Example.vue

使用正文插槽

您可以使用数据 table 的 body 插槽，并像这样使用与简单 table 中几乎相同的代码。这样您就可以在 tr:

中设置 handleClick 函数

<v-data-table
   :headers="headers"
   :items="items"
   hide-default-footer
   hide-default-header               
   :items-per-page="-1"
   :footer-props="{
      itemsPerPageOptions: [-1],
   }"
>
   <template v-slot:body="{ items}">
      <tbody>
         <tr v-for="item in items" :key="item"  @click="handleClick(item)">
               <td align="left">{{item}}</td>
         </tr>
      </tbody>
   </template>
</v-data-table>

正在使用物品栏位

或者您可以像这样使用 item 插槽。换句话说，使用数据 table.

的 @click:row 事件配置 handleClick 函数

如果您尝试将 item 槽与您的字符串数组一起使用，它会起作用，但您会在控制台中收到一些警告。告诉您您的 data-table 项目槽需要一个对象并收到一个字符串。那是因为 v-data-table 组件需要接收一个对象数组。

为避免此警告，您只需使用 Array.prototype.map 将字符串数组转换为虚拟对象数组，然后绑定计算的属性。

computed: {
   myItemsTransformed() {
      return this.items.map(item => ({ name: item }));
   }
},

<v-data-table
   :headers="headers"
   :items="myItemsTransformed"
   hide-default-footer
   hide-default-header               
   :items-per-page="-1"
   :footer-props="{
      itemsPerPageOptions: [-1],
   }"               
   @click:row="(item) => handleClick(item.name)"
>
   <template #item.name="{ item }">
      {{ item.name }}
   </template>
</v-data-table>

请注意，在这两个示例中，我都使用了属性 hide-default-footer、hide-default-header 来隐藏数据的页脚和页眉 table 并将 items-per-page 设置为-1。显示 table 的所有项目并避免分页。

将 vuetify simple-table 更改为 data-table

Change vuetify simple-table to data-table

vue.js

nuxt.js

vuetify.js

使用正文插槽

正在使用物品栏位