Bootstrap Vue 테이블의 첫 번째 필드로 확인란을 설정하는 방법

Bootstrap Vue 테이블의 첫 번째 필드로 확인란을 설정하는 방법

(영어가 서툴러서 죄송합니다)

저는 Vue와 Bootstrap Vue를 사용하는 것이 매우 처음입니다.

API 데이터로 테이블을 만들고 있습니다.첫 번째 행의 필드는 API에서 받은 배열의 키로 구성됩니다.다음과 같습니다.https://i.stack.imgur.com/abq1Q.png

첫 번째 열에 "index" 필드 대신 확인란을 추가하고 싶은데, 실제로 방법을 모르겠습니다.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'
                }
            ]
        }
    }

도와주셔서 정말 감사합니다.

를 사용할 수 있습니다.headslot에 필드 이름을 지정합니다(예: "index").

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

형식은 셀 슬롯템플릿과 동일하지만head.

언급URL : https://stackoverflow.com/questions/65228099/how-to-set-a-checkbox-as-a-first-field-of-a-bootstrap-vue-table