如何多次复用Bootstrap-vue的<b-table>组件并绑定不同数据

嘿，我看你想把Bootstrap-Vue的<b-table>做成可复用组件，用来加载不同API的数据对吧？刚好我有一套实用的方案，结合你现有的axios请求逻辑来调整，应该能满足你的需求～

第一步：封装可复用的表格组件 #

我们先把<b-table>包装成一个独立组件，通过接收props来适配不同的数据源和列配置。比如创建一个ReusableBTable.vue文件：

<template>
  <b-table
    :items="tableItems"
    :fields="tableFields"
    :busy="isBusy"
    striped
    hover
  >
    <!-- 预留自定义列插槽，方便后续扩展 -->
    <template v-slot:cell(actions)="data">
      <b-button size="sm" variant="primary" @click="emitRowAction(data.item)">
        操作
      </b-button>
    </template>
  </b-table>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ReusableBTable',
  props: {
    // 不同页面传不同的API地址
    apiUrl: {
      type: String,
      required: true
    },
    // 不同表格传不同的列定义
    tableFields: {
      type: Array,
      required: true
    },
    // 可选：是否初始化时自动加载数据，默认开启
    autoLoad: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableItems: [],
      isBusy: false,
      errors: []
    }
  },
  mounted() {
    if (this.autoLoad) {
      this.fetchTableData()
    }
  },
  methods: {
    // 用async/await重构请求，比.then更易读
    async fetchTableData() {
      this.isBusy = true
      try {
        const response = await axios.get(this.apiUrl)
        this.tableItems = response.data
        // 通知父组件数据加载完成
        this.$emit('data-loaded', this.tableItems)
      } catch (e) {
        this.errors.push(e)
        // 通知父组件加载出错
        this.$emit('load-error', e)
      } finally {
        this.isBusy = false
      }
    },
    emitRowAction(item) {
      // 把行操作事件传递给父组件处理
      this.$emit('row-action', item)
    }
  }
}
</script>

第二步：在父组件中复用这个表格组件 #

现在你可以在任何需要表格的页面里导入这个组件，传入不同的API地址和列配置即可：

<template>
  <div class="container mt-4">
    <!-- 用户列表表格 -->
    <h3>用户列表</h3>
    <reusable-b-table
      api-url="https://jsonplaceholder.typicode.com/users"
      :table-fields="userColumns"
      @data-loaded="onUsersLoaded"
      @row-action="handleUserAction"
    />

    <!-- 帖子列表表格 -->
    <h3 class="mt-5">帖子列表</h3>
    <reusable-b-table
      api-url="https://jsonplaceholder.typicode.com/posts"
      :table-fields="postColumns"
      @load-error="showErrorToast"
    />
  </div>
</template>

<script>
import ReusableBTable from './ReusableBTable.vue'

export default {
  components: {
    ReusableBTable
  },
  data() {
    return {
      // 用户表格的列定义
      userColumns: [
        { key: 'id', label: 'ID' },
        { key: 'name', label: '姓名' },
        { key: 'email', label: '邮箱' },
        { key: 'actions', label: '操作' }
      ],
      // 帖子表格的列定义
      postColumns: [
        { key: 'id', label: 'ID' },
        { key: 'title', label: '标题' },
        { key: 'body', label: '内容' }
      ]
    }
  },
  methods: {
    onUsersLoaded(data) {
      console.log('用户数据加载完成啦:', data)
    },
    handleUserAction(userItem) {
      console.log('要操作这个用户:', userItem)
      // 这里可以写编辑、删除等具体逻辑
    },
    showErrorToast(error) {
      console.error('数据加载失败:', error)
      // 可以用Bootstrap-Vue的<b-toast>给用户提示错误
    }
  }
}
</script>

一些小提示 #

• 你的原代码里console.log(items)要改成console.log(this.items)哦，因为items是Vue实例的data属性，直接写items会找不到变量
• 如果需要带参数的请求（比如分页、筛选），可以给组件加一个requestParams的props，把参数传给axios的get请求
• 要是某些表格需要特殊的列渲染，直接用插槽（slot）就能实现，就像示例里的“操作”列那样灵活

内容的提问来源于stack exchange，提问作者Pranay