使用插槽将行模板从父组件传递给 vue bootstrap table

Question

我有一个名为 "List" 的组件，其中包含一个 vue boostrap table:

<template>
  <div>
    <b-table :items="items">
      <!--<template slot="createdAt" slot-scope="row"> usually vue boostrap table row templates live here-->
        <!--{{row.item.createdAt|dateFormatter}}-->
      <!--</template>-->
      <slot name="tableTemplates"></slot> <!-- but i want to pass the templates from my parent template -->
    </b-table>
  </div>
</template>

我正在传递父组件 "Orders" 中的 table 项。我还想将行模板传递给 vue boostrap b-table 组件。

不幸的是，我无法使用插槽让它工作（那将是模板中的模板）

<template>
  <div>
    <list :items="items">
      <template slot="tableTemplates">
        <!--templates inside templates do not work-->
        <template slot="id" slot-scope="row">
          <span v-b-tooltip.hover :title="row.item.id">{{row.item.id|uuidFormatter}}</span>
        </template>
        <template slot="createdAt" slot-scope="row">
          {{row.item.createdAt|dateFormatter}}
        </template>
        <template slot="customer" slot-scope="row">
          {{row.item.customer}}
        </template>
      </template>
    </list>
  </div>
</template>

Answer 1

你试过吗？您从 table 的插槽中获取范围，然后在您的嵌套插槽中提供此范围：

<template>
  <div>
    <b-table :items="items">
      <template slot-scope="row">
        <slot name="tableTemplates" :tbl-props="row"></slot>
      </template>
    </b-table>
  </div>
</template>

Answer 2

您只需更改 IVO 的答案并使您的列表组件通用。
这是一种可能的方法：

列表组件模板：

<template>
  <b-table striped hover :items="items">
    <template :slot="slot.field" slot-scope="row" v-for="slot in slots">
      <slot :name="slot.name" :tbl="row"></slot>
    </template>
  </b-table>
</template>

列出组件道具：

  props: {
    items: {
      type: Array
    },
    slots: {
      type: Array
    }
  },

然后，在任何父组件（使用List）中，您可以定义一个templates数据属性，其中包含要传递给List组件的模板指令数组。在示例中，我使用了一个对象数组来传递动态插槽名称和 table 数据字段。

父组件templates数据属性:

  data() {
    return {
      ...
      templates: [
        {
          name: "templateName",
          field: "dataFieldName"
        },
        ...
      ]
    };
  },

父组件模板，List用法：

  <list :items="items" :slots="templates">
    <template slot="customSlotName" slot-scope="data">
        // Custom template here...
    </template>
  </list>

这将使您所有的自定义模板逻辑都存在于父组件中，例如。 Order.vue，而不是 List.vue。

这是更新后的代码框： https://codesandbox.io/s/244p9rx10n

使用插槽将行模板从父组件传递给 vue bootstrap table

Pass row templates to vue boostrap table from parent component using slots

javascript

vue.js

bootstrap-vue