Bootstrap-Vue自定义列问题：编辑列按钮不显示求助

我正在尝试给Bootstrap-Vue的<b-table>每行添加删除和编辑按钮，但目前Edit列是空的，看不到按钮。下面是我的相关代码：

表格组件代码 #

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

恳请告知问题原因，感谢！

嘿，我一眼就看出问题所在啦！这是个很常见的Bootstrap-Vue表格自定义列的小坑，我来帮你梳理下：

问题原因 #

1. 字段定义不规范：你在fields数组里把edit作为字符串直接添加，虽然Bootstrap-Vue能识别这个键，但没有明确的label会导致表头显示不够友好，更关键的是——
2. 插槽数据访问错误：你在模板里尝试用data.id获取行ID，但实际上<b-table>的单元格插槽参数data的结构是{ item, index, field }，行数据都存在data.item里，直接写data.id自然拿不到值，不过这不是按钮不显示的核心原因；
3. 哦不对，按钮不显示的核心是：当你用字符串'edit'定义字段时，Bootstrap-Vue会默认尝试渲染对应行数据里的edit属性，但你的datas数组里每个对象都没有edit属性，所以列会显示为空。只有当你明确通过插槽覆盖这个单元格的渲染逻辑时，才会显示自定义内容，但这里因为你访问数据的方式不对，加上字段定义的小问题，导致按钮没渲染出来。

修复方案 #

两步就能搞定：

1. 修正fields里的edit字段：改成对象形式，指定key和友好的label（比如"操作"）：

fields: [
{ key: 'edit', label: 'Actions' }, // 改成对象，明确键和表头文字
{ key: 'usergroupname', label:'User Group Name' , sortable: true},
// ... 其他字段保持不变
],

2. 修正插槽里的数据访问方式：把data.id改成data.item.id，确保能拿到每行的ID：

<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.item.id)">Delete</b-button>
<b-button @click="editItem(data.item.id)">Edit</b-button>
</template>
</b-table>

这样修改后，你的编辑和删除按钮应该就能正常显示在"Actions"列里啦！如果还是有问题，可以检查下Bootstrap-Vue的版本（确保是v2.x及以上，这个版本才支持#cell({key})这种插槽语法）。

内容的提问来源于stack exchange，提问作者Tony S