Как установить флажок в качестве первого поля таблицы Bootstrap Vue

(Извините за мой плохой английский)

Я новичок в использовании 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'
                }
            ]
        }
    }

Большое спасибо за помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
1 094
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать слот head с именем поля, в вашем случае «индекс»:

<template #head(index) = "slotData">
   <b-form-checkbox></b-form-checkbox>
</template>

Формат такой же, как у шаблонов слотов для ячеек, но с head.

Другие вопросы по теме