如何在boostrap vue中显示b-tabs中的按钮？

在Bootstrap Vue中，b-tabs组件用于创建选项卡式导航。要在b-tabs中显示按钮，你可以使用b-tab组件来定义每个选项卡，并在其中放置按钮。以下是如何在Bootstrap Vue中显示b-tabs中的按钮的基础概念和相关示例代码。

基础概念

Bootstrap Vue: 是一个Vue.js的插件，它提供了Bootstrap V4的组件。
b-tabs: 是一个用于创建选项卡导航的组件。
b-tab: 是b-tabs的子组件，用于定义每个选项卡的内容。

示例代码

以下是一个简单的示例，展示了如何在b-tabs中使用按钮：

<template>
  <div>
    <!-- b-tabs 组件 -->
    <b-tabs content-class="mt-3">
      <!-- 第一个选项卡 -->
      <b-tab title="Tab 1" active>
        <template #title>
          <span>Tab 1</span>
          <button class="btn btn-primary ml-2">按钮</button>
        </template>
        这是第一个选项卡的内容。
      </b-tab>

      <!-- 第二个选项卡 -->
      <b-tab title="Tab 2">
        <template #title>
          <span>Tab 2</span>
          <button class="btn btn-secondary ml-2">按钮</button>
        </template>
        这是第二个选项卡的内容。
      </b-tab>

      <!-- 第三个选项卡 -->
      <b-tab title="Tab 3">
        <template #title>
          <span>Tab 3</span>
          <button class="btn btn-success ml-2">按钮</button>
        </template>
        这是第三个选项卡的内容。
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: 'TabsWithButtons'
}
</script>

<style scoped>
/* 你可以在这里添加一些自定义样式 */
</style>