动态覆盖模板槽答案

【问题标题】：Overwrite template slot dynamically动态覆盖模板槽
【发布时间】：2020-04-25 22:55:27
【问题描述】：

从 Laravel 的 belongsTo() 关系中获取一些标头配置。响应如下所示：

    <v-data-table
            :headers="newHeaders"
            :items="products"
            item-key="name"
        >
      <template v-slot:header.stocks.0.pivot.quantity="{ header }">
        {{ header.text }}
        <v-icon>
          mdi-pencil-outline
        </v-icon>
      </template>
   </v-data-table>

我只想使用插槽将我的图标“动态”添加到所有“Stock”标题添加（可能是 1、2、3 或更多标题）。

我怎样才能实现这个功能？我的意思是，现在是静态的，因为如果添加另一只股票，我必须使用<template v-slot:header.stocks.1.pivot.quantity="{ header }"> 来做。

已编辑： 表格是这样的：

【问题讨论】：

您是说列数会根据您的 API 调用结果动态变化吗？您能否提供更多关于决赛桌应该是什么样子的细节（即模型或详细描述）？我认为有一种方法可以解决您的问题，但是该方法与您到目前为止所描述的不同。
感谢您的回答@morphatic API 可以为该产品（关系）添加新股票，这意味着下次刷新页面时会添加一个新列。但是，如果我需要使用 vuetify 中的插槽“修改”标题，我会这样做 <template v-slot:header.stocks.2.pivot.quantity="{ header }">

标签： laravel vuejs2 vuetify.js belongs-to

【解决方案1】：

我使用这个答案的解决方案：Same slot content for multiple template slots 这是一种华丽，这是我的解决方案：

模板标签

  <v-data-table
        :headers="newHeaders"
        :items="products"
        item-key="name"
    >
  <template 
     :slot="slotName"
     slot-scope="props"
     v-for="slotName in pivotNames">
    {{ props.header.text }}
    <v-icon>
      mdi-pencil-outline
    </v-icon>
  </template>

脚本标签

  export default {
    name: "Product",
    data() {
        return {
          newHeaders: [...],
          products: [...],
          stockHeaders: [], //Have stock headers info
          pivotNames: [] //Used in the v-for
        }
    },
    methods: {
        getPivotHeaders() {
            const self = this;

            this.stockHeaders.forEach(function(stock, index) {
                let indexFound = stock["value"].includes("pivot.quantity");

                if (indexFound) {
                    self.pivotNames.push("header." + stock["value"]); //Create name for slot template
                }
            });
        }
    }

【讨论】：