Vue.js 引导vue表选择单元

我正在将VueJs与引导一起使用。使用当前代码，我只能选择整行。 可以选择一个或多个表格单元格吗

希望你能帮助我

<template>
    <div class="scheduler">
        <b-table ref="selectableTable"
                 selectable
                 :items="scheduleMap"
                 :fields="fields">
        </b-table>
    </div>
</template>

<script>
    export default {
        name: 'Scheduler',
        data() {
            return {
                fields: ['time', 'bookedCourt1', 'bookedCourt2'],
                scheduleMap: [
                    {time: "9:00 AM", bookedCourt1: true, bookedCourt2: false},
                    {time: "10:00 AM", bookedCourt1: false, bookedCourt2: true},
                    {time: "11:00 AM", bookedCourt1: false, bookedCourt2: true},
                ],
            }
        }
    }
</script>

导出默认值{
名称：“调度程序”，
数据（）{
返回{
字段：[“时间”、“bookedCourt1”、“bookedCourt2']，
计划图：[
{时间：“上午9:00”，bookedCourt1:true，bookedCourt2:false}，
{时间：“上午10:00”，bookedCourt1:false，bookedCourt2:true}，
{时间：“上午11:00”，bookedCourt1:false，bookedCourt2:true}，
],
}
}
}

可以选择一个或多个表格单元格吗

不幸的是，这是不可能的。正如您可能看到的，您只能选择整行

但您可以将自定义单元格传递给表。例如：

<template>
    <div class="scheduler">
        <b-table ref="selectableTable"
                 selectable
                 :items="scheduleMap"
                 :fields="fields">
          <template v-slot:cell(bookedCourt1)="row">
            <b-form-checkbox v-model="row.item.bookedCourt1" name="check-button" switch>
              Booked Court 1
            </b-form-checkbox>
          </template>
          <template v-slot:cell(bookedCourt2)="row">
            <b-form-checkbox v-model="row.item.bookedCourt2" name="check-button" switch>
              Booked Court 2
            </b-form-checkbox>
          </template> 
        </b-table>
    </div>
</template>

<script>
    export default {
        name: 'Scheduler',
        data() {
            return {
                fields: ['time', 'bookedCourt1', 'bookedCourt2'],
                scheduleMap: [
                    {time: "9:00 AM", bookedCourt1: true, bookedCourt2: false},
                    {time: "10:00 AM", bookedCourt1: false, bookedCourt2: true},
                    {time: "11:00 AM", bookedCourt1: false, bookedCourt2: true},
                ],
            }
        }
    }
</script>

预定场地1
预定场地2
导出默认值{
名称：“调度程序”，
数据（）{
返回{
字段：[“时间”、“bookedCourt1”、“bookedCourt2']，
计划图：[
{时间：“上午9:00”，bookedCourt1:true，bookedCourt2:false}，
{时间：“上午10:00”，bookedCourt1:false，bookedCourt2:true}，
{时间：“上午11:00”，bookedCourt1:false，bookedCourt2:true}，
],
}
}
}

---

工作示例：

我只需为表中的每个单元格添加一个单击事件。可能不是最好的解决方案，但对我来说已经足够了：）

{{time}}
<tr v-for="(time, timeIndex) in times" :key="timeIndex">
  <td>
    {{ time }}
</td>
<td :class="
    @click="setModalData(...)">
   {{ ... }}
</td>
</tr>