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

Posted 2023-02-22

【中文标题】如何将复选框设置为 Bootstrap Vue 表的第一个字段

【英文标题】：How to set a checkbox as a first field of a Bootstrap Vue Table

【发布时间】：2021-03-21 11:55:13

【问题描述】：

（对不起，我的英语不好）

我是使用 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'
                
            ]
        
    

非常感谢您的帮助。

【参考方案1】：

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

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

格式与单元格模板类似，但带有head。