Vue-Bootstrap在表中添加特殊行

<template>
  <div>
    <b-table :items="items" :fields="fields">
      <!-- 标题行 -->
      <template v-slot:table-header>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Actions</th>
        </tr>
      </template>

      <!-- 汇总行 -->
      <template v-slot:table-footer>
        <tr>
          <td colspan="3">Total: {{ items.length }}</td>
          <td></td>
        </tr>
      </template>

      <!-- 操作行 -->
      <template v-slot:cell(actions)="data">
        <b-button variant="danger" @click="deleteItem(data.item.id)">Delete</b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ['id', 'name', 'age', 'actions'],
      items: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Jack', age: 35 }
      ]
    };
  },
  methods: {
    deleteItem(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>