Vuetify学习记录（三）-- v-data-table

前言

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

一、基础属性

• 数据想要正常显示的关键属性items和headers

<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.top和body.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（表格最底部插入内容）

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

• 这里直接演示footer的示例，foot跟body.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组件