(Извините за мой плохой английский)
Я новичок в использовании Vue и Bootstrap Vue.
Я создаю таблицу с данными API. Поля первой строки строятся из ключей массива, полученного от API. Так: https://i.stack.imgur.com/abq1Q.png
Хочу добавить чекбокс в первую колонку, вместо поля "индекс", но правда не знаю как. Я хочу это: https://i.stack.imgur.com/mpna8.png
Это мой код:
template: /*html*/`
<div class = "mx-auto commodity card">
<div class = "commodity__div-buttons">
<div class = "commodity__buttons">
<b-button variant = "success">Add row</b-button>
<b-button variant = "danger">Delete</b-button>
</div>
<div class = "commodity__generate">
<b-button variant = "primary" @click = "getSessionStorageData">Generate</b-button>
</div>
</div>
<b-table striped hover responsive :fields = "fields" :items = "commodity_data">
<template #cell(index) = "data">
<input type = "checkbox">
</template>
</b-table>
</div>
`,
data() {
return {
commodity_data: [],
fields: [
'index',
{
key: 'hu_count',
label: 'Hu Count'
},
{
key: 'dimensions',
label: 'Dimensions'
},
{
key: 'weight',
label: 'Weight'
}
]
}
}
Большое спасибо за помощь.
Вы можете использовать слот head
с именем поля, в вашем случае «индекс»:
<template #head(index) = "slotData">
<b-form-checkbox></b-form-checkbox>
</template>
Формат такой же, как у шаблонов слотов для ячеек, но с head
.