使用模板将每一行的按钮添加到 b-table

Question

我正在尝试使用 Vuejs 模板向我的 table 的每一列添加一个按钮，我得到了操作列，但该按钮没有出现。我想我错过了什么

<template>
  <div id="menu">
    <br>
    <b-table
        :items="items"
        :fields="fields">
        <template slot="actions" slot-scope="props">
          <span>
            <b-btn>Edit</b-btn>
          </span>
        </template>
    </b-table>
  </div>
</template>

和

export default {
  data() {
    return {
      items: [],
      fields: [
        "name",
        "days",
        "actions"
      ]
    };
  },

Answer 1

试试这个：

new Vue({
  el: "#menu",
  data: () => ({
    items: [{name:'name', days:'days'}],
    fields: ["name", "days", "actions"]
  }),
  methods: {
    editItem(item) { console.log(item); }
  }
});

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="menu">
  <b-table :items="items" :fields="fields">
    <template v-slot:cell(actions)="{ item }">
      <span><b-btn @click="editItem(item)">Edit</b-btn></span>
    </template>
  </b-table>
</div>

使用模板将每一行的按钮添加到 b-table

Add a button in every row to a b-table using template

vue.js

bootstrap-4

vue-component