Question

我想从Vuetify制作一个可重用的数据表组件。有些列可能包含v-slot来修改该列中的数据。例如：我将用户角色存储为整数，并希望它们显示为user或admin in the table. Currently I do this with this v-slot`：

 <template v-slot:item.role="{item} ">
    {{ (item.role === 1) ? 'Administrator' : 'User' }}
 </template>

因为这不是我要从使用数据表的父组件传递这些v-slot到的每个数据表的用例。我的数据表组件当前如下所示：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:item.role="{item} ">
      {{ (item.role === 1) ? 'Administrator' : 'User' }}
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon @click="deleteItem(item)" small>fas fa-trash</v-icon>
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "DataTable",
  props: {
    title: String,
    headers: Array,
    items: Array
  },
  methods: {
    deleteItem(item) {
      this.$emit("clicked", item);
    }
  }
};
</script>

这是我使用DataTable的组件（UserTable.vue）：

<template>
  <DataTable :title="title" :headers="headers" :items="items" @clicked="onDelete" />
</template>

<script>
import DataTable from "../../../components/DataTable";
import axios from "axios";

export default {
  name: "UserTable",
  components: {
    DataTable
  },
  props: {
    items: Array
  },
  data: () => ({
    title: "Users",
    headers: [
      {
        text: "Name",
        value: "name"
      },
      {
        text: "Email",
        value: "email"
      },
      {
        text: "Role",
        value: "role"
      },
      { text: "Actions", value: "action", sortable: false }
    ],
  }),
  methods: {
    onDelete(item) {
      this.$emit("clicked", item);
    }
  }
};
</script>

在理想情况下，我希望在UserTable组件中添加以下内容：

<template>
  <DataTable :title="title" :headers="headers" :items="items" @clicked="onDelete">
      <template v-slot:item.role="{item} ">
      {{ (item.role === 1) ? 'Administrator' : 'User' }}
    </template>
    <template v-slot:item.action="{ item }">
      <v-icon @click="deleteItem(item)" small>fas fa-trash</v-icon>
    </template>
  </DataTable>
</template>

然后像这样使DataTable保持简洁：

<template>
  <v-data-table :headers="headers" :items="items">
    <slot></slot>
  </v-data-table>
</template>

但是，这显然似乎不符合我的预期，因为它现在在所需的列中未显示任何内容。我创建了一个CodeSandBox，让您看看现在的状态：

https://codesandbox.io/s/priceless-bohr-oxu18?fontsize=14&hidenavigation=1&theme=dark

有人可以告诉我为什么我的方法行不通或如何解决吗？

Vue-将插槽向下传递到子组件

0 个答案: