时间戳

首页 > 解决方案 > 引导程序Vue，带有基于表的绑定项目数据的复选框输入

javascript - 引导程序Vue，带有基于表的绑定项目数据的复选框输入

问题描述

我有一个充满数据的表。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 并使用 Vuev-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>

标签： javascriptvue.jsvuejs2vue-componentbootstrap-vue

解决方案

您可以在作用域插槽内按如下方式访问行项目并将嵌套复选框绑定到selected属性：

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

有关详细信息，请参阅表格 - 自定义渲染文档。

推荐阅读