动态覆盖模板插槽

Question

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

我的Vuetify data table配置是这个：

    <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 }">来进行。

编辑：这是表格的样子：

Answer 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
                }
            });
        }
    }