Bootstrap Vue,сна основе данных связанного элемента для таблицы - PullRequest
Новая
       6

Bootstrap Vue,сна основе данных связанного элемента для таблицы

0 голосов
/ 14 февраля 2019

У меня есть таблица, заполненная данными.У меня есть свойство 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 и используя v-for Vue для циклического перехода по 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>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы можете получить доступ к элементу строки следующим образом внутри области видимости и привязать вложенный флажок к свойству selected: 

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

Full Codesandbox code

0 голосов
/ 14 февраля 2019

*** Этот ответ был отредактирован.Пользователь @BoussadjraBrahim прокомментировал несколько кодов и код коробки, который отвечает на это.

Правильное исправление выглядит следующим образом: 

<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>

Предыдущий ошибочный ответ: Использование ответа из этого SO вопроса Я пытался: 

<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" только при условии связывания с верхней строкой.Плюс стиль отличается от того, что я хотел.

...