动态覆盖模板槽

Question

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

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

我只想使用插槽将我的图标 'dynamically' 添加到所有 'Stock' headers 添加（可以是 1、2、3 或更多 headers）。

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

已编辑： 这是 table 的样子：

Answer 1

我使用了这个答案中的一个解决方案： 这是一种华丽的解决方案，这是我的解决方案：

模板标签

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