Bootstrap-Vue如何创建自定义列？
提问于 2020-10-30 10:09:46
下面是我的代码：
<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: '' }
],
}
}
},我试着让添加和编辑按钮每行，但现在编辑列是空的，我看不到我的按钮。
有谁知道这个问题的原因吗？谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-30 16:46:17
正如在注释中提到的，您使用的是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中的原因。这在以前的版本和以后的版本中都是不同的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64606336
复制相关文章
点击加载更多
腾讯云开发者
