V-data-table 通过 v-slot:body 控制扩展项

Question

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

预期行为是通过单击表中一列中的按钮，该行在下方展开。

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

代码笔：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与 with 一起使用时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:expanded-item>将不适用于<template v-slot:body>. 除了v-slot:body道具不包括项目特定的属性和事件等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>. 要在单击时打开唯一项目，您需要在 上设置item-key=""属性<v-data-table>。