使用模板将每行中的按钮添加到 b 表

Posted 2023-02-23

【中文标题】使用模板将每行中的按钮添加到 b 表

【英文标题】：Add a button in every row to a b-table using template

【发布时间】：2021-08-24 01:12:19

【问题描述】：

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

<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"
      ]
    ;
  ,

【参考方案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>

【讨论】：

这行得通，谢谢！我会阅读 v-slot 并尝试了解它是如何工作的。