通过v-slot控制扩展项的v-data表:body

Question

关于vuetify 2.0v-data-tables的文档没有指定如何通过v-slot:body控制扩展项。我有一个需要用body v-slot指定的表，并希望使用扩展功能。

预期行为是通过单击表中某一列中的按钮，下面的行将展开。

我使用v-slot:body，因为我需要完全定制列内容。我正在从vuetify 1.5迁移代码，其中props.expanded启用了此功能。

Codepen：https://codepen.io/thokkane/pen/PooemJP

<template>
  <v-data-table
    :headers="headers"
    :items="deserts"
    :expanded.sync="expanded"
    :single-expand="singleExpand"
    item-key="name"
    hide-default-footer
  >
    <template v-slot:body="{ items }">
      <tbody>
        <tr v-for="item in items" :key="item.name">
          <td>
            <v-btn @click="expanded.includes(item.name) ? expanded = [] : expanded.push(item.name)">Expand</v-btn>
          </td>
        </tr>
      </tbody>
    </template>
    <template v-slot:expanded-item="{ headers, item }">
      <span>item.name</span>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        expanded: [],
        singleExpand: false,
        headers: [
          { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
          { text: '', value: 'data-table-expand' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
        ],
      }
    },
  }
</script>

Answer 1

当您同时使用v-slot:body和v-slot:expanded-item时，您将覆盖您在v-slot:expanded-item中所做的更改。这是因为expanded-item插槽在body插槽内。如果你打算使用body进行定制，不幸的是，你必须定制里面的所有东西。

想象一下这样的结构：

<div slot="body">
  <div slot="item">...</div>
  <div slot="expanded-item">...</div>
  etc...
<div>

因此，在这种情况下，<template v-slot:body>将取代<div slot="body">和内部的任何东西。因此，在<template v-slot:body>中不能使用<template v-slot:expanded-item>。此外，v-slot:body props不包括特定于项目的属性和事件，如select(), isSelected, expand(), isExpanded等。

我建议您改用v-slot:item。你可以用更少的代码来完成同样的事情，而不需要定制所有的东西。

像这样的东西应该是有效的：

<template v-slot:item="{ item, expand, isExpanded }">
  <tr>
    <td>
      <v-btn @click="expand(!isExpanded)">Expand</v-btn>
    </td>
    <td class="d-block d-sm-table-cell" v-for="field in Object.keys(item)">
      {{item[field]}}
    </td>
  </tr>
</template>

<template v-slot:expanded-item="{ headers, item }">
  <td :colspan="headers.length">Expanded Content</td>
</template>

如果您想在JavaScript中访问展开的项目，请不要忘记将:expanded.sync="expanded"添加到<v-data-table>。要在单击时打开唯一项，您需要在<v-data-table>上设置item-key=""属性。

Answer 2

在较新的版本中，您也可以使用body slot来实现这一点，以下是我的代码

https://codepen.io/saurabhtalreja/pen/JjyWxEr

​

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    headers: [{
        name: 'id',
        text: 'id',
        value: 'id'
      },
      {
        name: 'text',
        text: 'text',
        value: 'text'
      }
    ],
    items: [{
        id: 1,
        text: "Item 1"
      },
      {
        id: 2,
        text: "Item 2"
      },
      {
        id: 3,
        text: "Item 3"
      },
      {
        id: 4,
        text: "Item 4"
      },
      {
        id: 5,
        text: "Item 5"
      }
    ]
  })
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-data-table class="elevation-1" :headers="headers" :items="items" show-expand hide-default-footer>

          <template v-slot:body="{ items, headers, expand, isExpanded }">
            <tbody>
              <tr v-for="item in items" :key="item.name">
                <td>
                  <v-btn @click="expand(item,!isExpanded(item))">Expand</v-btn>
                  <div v-if="isExpanded(item)" :style="{width:  '250px'}">
                    Expanded content for {{ item.text }}
                  </div>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.text}}</td>

              </tr>
            </tbody>
          </template>

        </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>
<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-data-table class="elevation-1" :headers="headers" :items="items" show-expand hide-default-footer>
          <template v-slot:expanded-item="{item, headers}">
            <td :colspan="headers.length">
              expanded content for {{ item.text }}
            </td>
          </template>

        </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

​