引导Vue表选择

Question

当我尝试使用下面的数据时，我得到的第一列是true/false，而不是复选框。

这是vue表：

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

以下是我的表格数据：

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

Answer 1

将模板更改为：

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

请参见自定义数据渲染