Vuetify 访问数据表自定义组件中的 v-slot:item

Question

您好，我制作了自定义数据table 组件，我的Table.vue 文件如下所示：

<template>
    <div>
        <v-data-table
            :headers="headers"
            :items="items"
            :search="search"
            :loading="loading"
            loading-text="Loading... Please wait"
            dense
            >
            <template v-slot:top>
                <v-toolbar dark flat dense>
                    <v-toolbar-title>{{ title }}</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="Search"
                        single-line
                        hide-details
                        ></v-text-field>
                    <v-spacer></v-spacer>
                </v-toolbar>
            </template>
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "Table",
        props: [
            "headers",
            "items",
            "title",
            "itemsPerPage",
            "loading",
        ],
        data: function () {
            return {
                search: '',
            }
        },
        methods: {
        },
    };
</script>

我就是这样使用它的：

<Table
    :headers="headers"
    :items="groups"
    :loading="loading"
    title="Baseny"
    >
</Table>

一切都很好，但我想为每个输入添加带有操作的自定义列（每个输入都有不同的 ID）

通常没有自定义组件我是这样写的：

<v-data-table
            :headers="headers"
            :items="times"
            :items-per-page="5"
            :search="search"
            :loading="loading"
            loading-text="Ładowanie... Proszę czekać"
            >

            <template v-slot:top>
                <v-toolbar dark flat dense>
                    <v-toolbar-title>Lista zajęć</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="Szukaj"
                        single-line
                        hide-details
                        ></v-text-field>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="primary"
                        :to="{ name: 'admin.times.create' }"
                        >
                        Dodaj zajęcie
                    </v-btn>
                </v-toolbar>
            </template>

            <template v-slot:item.actions="{ item }">
                <v-icon
                    small
                    class="mr-2"
                    @click="show(item)"
                    >
                    mdi-pool
                </v-icon>
                <v-icon
                    small
                    class="mr-2"
                    @click="edit(item)"
                    >
                    mdi-pencil
                </v-icon>
            </template>
        </v-data-table>

我正在使用这个 v 槽：

<template v-slot:item.actions="{ item }">
                <v-icon
                    small
                    class="mr-2"
                    @click="show(item)"
                    >
                    mdi-pool
                </v-icon>
                <v-icon
                    small
                    class="mr-2"
                    @click="edit(item)"
                    >
                    mdi-pencil
                </v-icon>
            </template>

但是当我编写自定义可重用 table 组件时，当我将这些行放入标记时，它不起作用。这个怎么做？

Answer 1

我相信你想要实现的是一个包装器组件。您想将一个组件包裹在另一个组件之上，让他拥有一些您希望在您的应用程序中重用的自定义属性。

您需要的是一个小片段，可以让您使用插槽：

<!-- pass through scoped slots -->
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
  <slot :name="scopedSlotName" v-bind="slotData" />
</template>

<!-- pass through normal slots -->
<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
  <slot :name="slotName" />
</template>

你可以找到这个here

的来源

基本上，在这里你可以如何重写你的 CustomTable.vue:

<template>
  <div>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      :search="search"
      loading-text="Loading... Please wait"
      dense
    >
      <!-- pass through scoped slots -->
      <template
        v-for="(_, scopedSlotName) in $scopedSlots"
        v-slot:[scopedSlotName]="slotData"
      >
        <slot :name="scopedSlotName" v-bind="slotData" />
      </template>

      <!-- pass through normal slots -->
      <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
        <slot :name="slotName" />
      </template>
      <template v-slot:top>
        <v-toolbar dark flat dense>
          <v-toolbar-title>{{ title }}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: "CustomTable",
  props: ["title"],
  data: function () {
    return {
      search: "",
    };
  },
  methods: {},
};
</script>

我制作了一个 codesandbox 来向您展示它是如何工作的： https://codesandbox.io/s/vuetify-2-forked-3lp9y?file=/src/components/CustomTable.vue

我还在您的 table 上添加了自动属性和侦听器绑定，以允许您使用 Vuetify 提供的所有功能。

Vuetify 访问数据表自定义组件中的 v-slot:item

Vuetify access v-slot:item in datatable custom compoent

vue.js

vue-component

vuetify.js