Bootstrap-Vue如何创建自定义列？答案

【问题标题】：Bootstrap-Vue how to create a custom column?Bootstrap-Vue如何创建自定义列？
【发布时间】：2021-02-12 19:05:21
【问题描述】：

这是我的代码：

      <b-table
          hover
          :items="usergroupTable.datas"
          :fields="usergroupTable.fields"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          responsive="sm"
      >
        <template #cell(edit)="data">
          <b-button @click="editItem(data.id)">Delete</b-button>
          <b-button @click="editItem(data.id)">Edit</b-button>
        </template>
      </b-table>

这是我的数据：

data() {
    return {
      usergroupTable: {
        filter: null,
        fields: [
          'edit',
          { key: 'usergroupname', label:'User Group Name' , sortable: true},
          { key: 'product', label:'Product' , sortable: true},
          { key: 'seatslimits', label:'Seats Limit' , sortable: true},
          { key: 'expirationdate', label:'Expiration Date' , sortable: true},
          { key: 'lastpayment', label:'Last Payment' , sortable: true},
          { key: 'nextpayment', label:'Next Payment' , sortable: true},
        ],
        datas: [
          { id: 5 ,usergroupname: 'IUT Bordeaux', product: 'Light', seatslimits: '20', expirationdate: '2021/08/01', lastpayment: '', nextpayment: '' },
          { id: 8, usergroupname: 'Admins', product: 'God', seatslimits: '', expirationdate: '', lastpayment: '', nextpayment: '' }
        ],
      }
    }
  },

我尝试在每一行添加和编辑按钮，但现在编辑列是空的，我看不到我的按钮。

有人知道这个问题吗？谢谢！

【问题讨论】：

您是否遇到任何 JS 错误？另外，我不熟悉这种语法，但你可以试试<template v-slot:cell(edit)="data">
与您的代码控制台中的任何错误相同的问题
我没有收到任何 JS 错误
您使用的是哪个版本的Vue 和BootstrapVue？
BootstrapVue 2.0.0 或 2.0.0-rc.xx?

标签： javascript vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

如 cmets 中所述，您使用的是 2.0.0-rc.28 版本，它对 <b-table> 插槽有不同的命名语法。

您使用的语法仅在2.0.0 及更高版本中可用，因此如果您想使用，您需要更新。

如果您无法升级并需要继续使用当前版本。语法为 v-slot:['[field_key]'] 用于单元格，v-slot:['HEAD[field_key]'] 用于头部单元格，v-slot:['FOOT[field_key]'] 用于页脚单元格。

您必须将其括在括号中的原因是因为这是使用v-slot 时的动态语法，因此命名[field_key] 不能直接使用。这也是为什么这种命名语法只存在于2.0.0-rc.28 中的原因。以前的版本和以后的版本不同。

【讨论】：