前言

在我接触Vuetify以来,v-data-table是我用的最频繁的组件之一。总的来说,v-data-table延续了Vuetify的特点,功能强大且稳定,找不出什么bug,但是官方文档的说明并不是特别友好,具体的使用技巧只能靠个人领悟。

一、基础属性

  • 数据想要正常显示的关键属性itemsheaders
<v-data-table
     :headers="headers"// 绑定的表头, 每一列的数据类名
     :items="desserts"// 绑定的数据数组,用于展示每一行的数据
     >
</v-data-table>

绑定的数据写在data里面:

data: () => ({
    headers: [
      {
        text: 'Dessert (100g serving)', //表头显示的文本
        align: 'start', // 文本对齐方向
        sortable: false, //控制切换排序的功能
        value: 'name', //对应的值
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
      },
    ],
  }),

展示效果如下:
在这里插入图片描述

这里仅做数据展示的相关属性介绍,其他的属性皆可通过官方文档操作。

官方文档地址

二、事件绑定

v-data-table提供对应的事件可用于组件之上。

1. click:row

在这里插入图片描述

click:row方法是点击每一行所触发的效果,方法提供两个参数,第一个是当前点击行的数据,第二个参数展示的更加具体的数据,例如当前数据行是否展开,是否被选中。

<template>
      <v-data-table
          :headers="headers"
          :items="desserts"
          item-key="name"
          @click:row="onClickRow" // 如果想要获取该方法的返参,最好不要用function()带括号的写法,那样会报错
      >
      </v-data-table>
</template>

<script>
export default {
  data: () => ({
    desserts: [...], // 每一行的数据
    headers: [...], // 数据表格的表头
  }),
  methods: {
    onClickRow(item, object){
      console.log(item)
      console.log(obeject)
    }
  }
}
</script>
  • 下面是返回参数
    第一个item参数:
    在这里插入图片描述
    第二个object参数:
    在这里插入图片描述

2. contextmenu:row(右键单击)和dblclick:row(双击)

contextmenu:row(右键单击)和dblclick:row(双击)这两个事件的参数一致,第一个参数都是返回的MouseEvent,第二个参数跟click:row的一致。

  • 具体代码书写不做赘述,跟click:row写法一致,以下是MouseEvent的返参:
    在这里插入图片描述

v-data-table还有诸多方法提供,使用步骤跟上面一致,根据具体需求场景来引用即可。

三、插槽的使用

Vuetify的组件给我的感觉是强大而稳定,正因为稳定,所以在之前的旧版本,想要自定义修改一些样式显得很困难。但是,现在的vuetify提供的插槽基本能满足大部分自定义样式的需求。

1. body(自定义整个表格)

  • 官方文档
    在这里插入图片描述

  • 相当于替换整个数据表的<tbody>,具体写法如下

<v-data-table
  :headers="layouts.settings.headers"
  :items="layouts.data.paymentInstallment"
>
  <template
    v-slot:body="{ items }" //这里放置的items就是上面绑定的数据数组
  >
    //这里插入自定义的表格体
    <tbody>
      <tr 
        v-for="(item, index) in items" 
        :key="index" 
        class="pa-6 red--text text-uppercase"// 自定义的样式
      > // 遍历数组里面的对象,才能在每一个单元格内展示数据
        <td> {{item.name}} </td>
        <td> {{item.calories}} </td>
        <td> {{item.fat}} </td>
        <td> {{item.carbs}} </td>
      </tr>
    </tbody>
  </template>
</v-data-table>

效果如下:
在这里插入图片描述

2. item.name(自定义某一列数据)

如果要修改整个表格的样式,建议使用body插槽,如果只是单纯的修改某一列的内容或格式,可以使用item.name,这个插槽允许修改某一列数据的样式。

<v-data-table
  :headers="headers"
  :items="desserts"
  >
    // 我们要修改的是calories这一列的数据,所以使用item.calories
    <template v-slot:item.calories="{ item }">
      //这里用的v-chip仅是实例,你还可以换checkbox,button等等
      <v-chip>{{ item.calories }}</v-chip>
    </template>
</v-data-table>

注意:官方文档推荐的方法如上所示,但是可能会因为eslint版本的问题而报错。
在这里插入图片描述
别着急,我们可以换一种写法:

<v-data-table
  :headers="headers"
  :items="desserts"
  >
    // 换一种写法
    <template v-slot:[`item.calories`]="{ item }"> //原理是将item.calories修改为字符串
      <v-chip>{{ item.calories }}</v-chip>
    </template>
</v-data-table>

效果如下:
在这里插入图片描述

3. body.prepend,body.append(表格的头部和尾部插入内容)

  • body.prepend,头部插槽

在表格的最顶部添加内容的插槽,一般的实用场景:在表头添加筛选器或者增删改查的操作按钮。

<v-data-table
  :headers="headers"
  :items="desserts"
  >
   <template v-slot:body.prepend> // 同理,eslint报错,换[`body.prepend`]
     <tr>
       <td></td>
         <td>
           <v-text-field
            v-model="calories"
            label="Less than"
           ></v-text-field>
         </td>
       <td colspan="2"></td>// 2指的是后面剩余的单元格数
     </tr>
   </template>
</v-data-table>

展示效果:
在这里插入图片描述

  • body.append 表尾插槽

用法跟body.prepend一样,body.append实在表格底部插入一行内容

<v-data-table
  :headers="headers"
  :items="desserts"
  >
   <template v-slot:body.append> // 同理,eslint报错,换[`body.append`]
     <tr>
       <td></td>
         <td>
           <v-text-field
            v-model="calories"
            label="Less than"
           ></v-text-field>
         </td>
       <td colspan="2"></td>// 2指的是后面需要填充的的单元格数
     </tr>
   </template>
</v-data-table>

展示效果:
在这里插入图片描述

4. body.top(表格之上插入内容)

要注意body.topbody.prepend的区别,插入内容的位置不同,body.top是在表格内,表头之上插入内容。

<v-data-table
  :headers="headers"
  :items="desserts"
>
  <template v-slot:top>
    <v-switch
      v-model="singleSelect"
      label="Single select">
    </v-switch>
  </template>
</v-data-table>

展示效果:
在这里插入图片描述

5. foot,footer(表格最底部插入内容)

官方文档提示不要混淆footfooter插槽,两者的区别在于foot生成一个<tfoot>元素,是包含在<tbody>之内的,内容高度超出组件高度,<tfoot>会被。而footer是在<tbody>之外,始终固定在表格底部。

  • 这里直接演示footer的示例,footbody.append差不多
// 当前代码是给数据表格增加分页器的功能
<v-data-table
  :headers="headers"
  :items="desserts"
  hide-default-footer
  item-key="name"
  :page.sync="page" //跟v-pagination的数据相绑定,用于控制页数的对照
  :items-per-page="itemsPerPage" // 每一页数据的数量
  @page-count="pageCount = $event"// page-count是v-data-table的事件类型,跟v-pagination的length绑定
  >
  <template v-slot:footer>
    <v-pagination
      v-model="page"
      :length="pageCount"
      ></v-pagination>
  </template>
</v-data-table>

效果如下:
在这里插入图片描述

6. expanded-item(自定义扩展内容)

expanded-item让每一行数据可以展开,显示更详细的数据。

<v-data-table
  :headers="headers"
  :items="desserts"
  hide-default-footer
  show-expand // 控制是否展开切换
  :single-expand="true" // 为true时,只能有一行数据可以展开,其他数据展开项关闭
  expand-icon="$expand" // 展开按钮的图标设置,默认是$expand,Vuetify的图标,必须加$修饰符,自行下载的图标库可以直接写名字,不加$
  item-key="name"// 拿的是header的某一个属性名作为每一行数据的索引,没有索引会导致展开按钮会控制所有的数据行
>
  <template v-slot:expanded-item="{ headers, item }">
    <td :colspan="headers.length"> // 这里是为了让展开的数据行跟原数据行长度一致
      More info about {{ item.name }} // 自定义需要展示的数据
    </td>
  </template>
</v-data-table>

展示效果如图:
在这里插入图片描述

展开符的位置默认在开头,如果想要控制在末尾或者某一列数据之后,则需要在data中绑定的header进行定义,如下所示。

<script>
export default {
  data: () => ({
    expanded: [],
    headers: [
      {
        text: 'Dessert (100g serving)', //表头显示的文本
        align: 'start', // 文本对齐方向
        sortable: false, //控制切换排序的功能
        value: 'name',
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: '', value: 'data-table-expand' },// 插入空的表头定义,展示符会对号入座
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
      },
      {
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
      },
    ],
  }),
}
</script>

展示效果:

总结

以上内容是我在使用过程中的一些感悟和学习记录,文章并没有囊括所有的属性、方法和插槽,因为我觉得使用思路是相同的,Vuetify3已经上线,属性也在不断更新中,所以学会如何使用才是关键。所谓万变不离其宗,v-data-table的使用思路同样适用于其他Vuetify的UI组件

Logo

前往低代码交流专区

更多推荐