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

Posted 2023-02-23

【中文标题】Vuetify 访问数据表自定义组件中的 v-slot:item

【英文标题】：Vuetify access v-slot:item in datatable custom compoent

【发布时间】：2021-11-26 01:02:09

【问题描述】：

您好，我制作了自定义数据表组件，我的 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-slot：

<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>

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

【参考方案1】：

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

你需要的是一个小型的 sn-p，它可以让你的插槽被使用：

<!-- 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>

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

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