如何将复选框设置为 Bootstrap Vue Table 的第一个字段

Question

（抱歉我的英语不好）

我是 Vue 的新手，BootstrapVue。

我正在用 API 的数据构建一个 table。第一行的字段是根据从 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'
                }
            ]
        }
    }

非常感谢您的帮助。

Answer 1

您可以将 head 插槽与字段名称一起使用，在您的情况下为“index”：

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

格式与单元槽模板一样，但具有 head。

如何将复选框设置为 Bootstrap Vue Table 的第一个字段

How to set a checkbox as a first field of a Bootstrap Vue Table

html

javascript

vue.js

vuejs2

bootstrap-vue