带自定义按钮添加和删除的Bootstrap Vue表

Bootstrap Vue 是一个流行的前端框架，它结合了 Bootstrap 的样式和 Vue.js 的响应式特性，使得开发者能够快速构建现代化的 Web 应用程序。下面我将详细介绍如何使用 Bootstrap Vue 创建一个带有自定义按钮用于添加和删除行的表格。

基础概念

Bootstrap: 一个流行的前端框架，提供了丰富的 CSS 类和组件，用于快速设计响应式的网页布局和用户界面。
Vue.js: 一个渐进式 JavaScript 框架，用于构建用户界面和单页应用程序。
Bootstrap Vue: 结合了 Bootstrap 和 Vue.js 的库，提供了易于使用的组件，如表格、表单、按钮等。

类型与应用场景

类型: 表格组件、按钮组件、表单组件等。
应用场景: 数据展示、用户管理、订单处理、产品列表等。

示例代码

以下是一个简单的示例，展示了如何使用 Bootstrap Vue 创建一个带有添加和删除按钮的表格：

<template>
  <b-table :items="items" :fields="fields">
    <template #cell(actions)="row">
      <b-button size="sm" @click="deleteRow(row.index)">Delete</b-button>
    </template>
  </b-table>
  <b-button @click="addRow">Add Row</b-button>
</template>

<script>
export default {
  data() {
    return {
      fields: ['name', 'age', 'actions'],
      items: [
        { name: 'Alice', age: 24 },
        { name: 'Bob', age: 27 }
      ]
    };
  },
  methods: {
    addRow() {
      this.items.push({ name: '', age: '' });
    },
    deleteRow(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

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