Bootstrap Vue，<b-table>基于表格绑定项目数据的复选框输入。

Question

我有一个充满数据的表。我有一个 selected 我想把数据绑定到b表中的复选框上的属性。我似乎不知道怎么做。

我的数据。

data: () => ({
  tableData: [
    {
      title: "title01",
      desc: "desc01",
      selected: false
    },
    {
      title: "title02",
      desc: "desc02",
      selected: false
    },
  ],
  tableColumns: [
    { key: "selected", label: "", sortable: false }
    { key: "title", label: "Title", sortable: false },
    { key: "desc", label: "Description", sortable: false }
})

html:

<b-table id="myTabel"
  hover
  striped
  :items="tableData"
  :fields="tableColumns">
  <template slot="selected" slot-scope="row">
    <b-form-group>
      <input type="checkbox" v-model="How_To_Bind_To_Object_Prop?">
    </b-form-group>
  </template>
</b-table>

在我的生活中，我不能让这个 v-model 设置为实际绑定到表中的数据。v-model="tableData.selected" 将所有复选框绑定到所有数据对象上。所以，如果你选中一个，你就会选中所有的，反之亦然。我只是不知道如何将它仅绑定到该行的数据。

我可以通过使用更传统的HTML和使用Vue的 v-for 绕过 tableData 来绑定每一行表。然而，我们正试图将大部分（如果不是全部的话）表单转移到使用bootstrap-vue。

所以，这很好用。

<table>
    <thead>
        <tr>
            <th :key="key" v-for="(tableColumn, key) in tableColumns">
                {{ tableColumn.label }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr :key="key" v-for="(tableRow, key) in tableData">
            <td>
                <input type="checkbox" 
                    v-model="tableRow.selected">
            </td>
            <td>
                {{ tableRow.title }}
            </td>
            <td>
                {{ tableRow.desc }}
            </td>
        </tr>
    </tbody>
</table>

Answer 1

你可以在范围内的槽中访问行项，如下所示，并将嵌套的复选框绑定到复选框上 selected 财产。

<template v-slot:cell(selected)="row">
   <b-form-group>
       <input type="checkbox" v-model="row.item.selected" />
   </b-form-group>
</template>

更多信息，请看 表--自定义渲染 文件。

Answer 2

*** 本回答已被编辑。用户 @BoussadjraBrahim 在评论中加入了一些 codesandbox 代码来回答这个问题。

正确的修复方法如下。

<b-table id="myTable"
  hover
  striped
  :items="tableData"
  :fields="tableColumns">
  <template slot="selected" slot-scope="row">
    <b-form-group>
      <input type="checkbox" v-model="row.item.selected">
    </b-for-group>
  </template>
</b-table>

上一个错误的答案：使用来自于 这个问题 我试过了

<b-table id="myTable"
  hover
  striped
  :items="tableData"
  :fields="tableColumns">
  <template slot="selected" slot-scope="row">
    <b-form-checkbox id="'selected'+row.index" v-model="row.item.selected" />
  </template>
</b-table>

使用 <b-form-checkbox> 随着 id="'selected'+row.index" 这只对上排提供了约束。再加上造型和我想要的不一样。