Bootstrap Vue如何创建自定义列

Question

这里是我的代码：

<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: '' }
],
}
}
},

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

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

Answer 1

如注释中所述，您使用的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中的原因。它在以前的版本和以后的版本中有所不同。