将 vuetify simple-table 更改为 data-table

Change vuetify simple-table to data-table

我在 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 以便更好地处理单击和选择行。

你可以这样改:

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>

检查我制作的这个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-footerhide-default-header 来隐藏数据的页脚和页眉 table 并将 items-per-page 设置为-1。显示 table 的所有项目并避免分页。