Bootstrap Vue table select

0
votes

When I try with the below data, I get the first column as true/false instead of a checkbox.

Here is the vue table:

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

Here is the my table data:

tableData: [{
      title: "title01",
      desc: "desc01",
      selected: false
    },
    {
      title: "title02",
      desc: "desc02",
      selected: true
    }
  ],
  tableColumns: [{
      key: "selected",
      label: "",
      sortable: false
    },
    {
      key: "title",
      label: "Title",
      sortable: false
    },
    {
      key: "desc",
      label: "Description",
      sortable: false
    }
  ]
1
vue.jsbootstrap-vue

1 Answers

1
votes

Change your template to:

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

https://jsfiddle.net/ellisdod/wvLjhmou/

see custom data rendering