Vue2中Bootstrap Vue的<b-table>内如何渲染自定义组件？

你封装的BaseTable.vue组件未将父组件传入的自定义插槽透传给内部的b-table组件，导致你在父层定义的#cell(actions)列插槽无法被识别，因此不会渲染按钮。

方案一：透传所有插槽（推荐，公共组件复用性更高） #

修改BaseTable.vue代码，遍历透传父组件传入的所有作用域插槽到内部b-table：

<template>
  <b-table :fields="fields" :items="items" v-bind="$attrs">
    <!-- Vue2 写法 -->
    <template 
      v-for="(slot, name) in $scopedSlots" 
      #[name]="slotData"
    >
      <slot :name="name" v-bind="slotData"></slot>
    </template>
    <!-- 如果是Vue3，把上面的$scopedSlots改成$slots即可 -->
  </b-table>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true // 注：原代码这里写的是require，修正为正确的required
    },
    items: {
      type: Array,
      required: true
    }
  },
  // 若需要透传原生事件可添加以下配置
  inheritAttrs: false
}
</script>

该方案无需修改父组件代码，后续所有b-table支持的插槽（比如表头插槽、空数据插槽等）都可以直接在父组件使用，无需反复修改BaseTable.vue。

方案二：单独透传指定插槽（适合需要控制插槽暴露范围的场景） #

如果不想开放所有插槽权限，也可以单独指定要透传的actions列插槽：

<template>
  <b-table :fields="fields" :items="items">
    <template #cell(actions)="slotData">
      <slot name="cell(actions)" v-bind="slotData"></slot>
    </template>
  </b-table>
</template>

该方案需要每新增一个自定义列插槽，就同步在BaseTable.vue里添加对应透传逻辑。

修改完成后父组件的BaseButton即可正常在操作列渲染。

内容的提问来源于stack exchange，提问作者Алексей