Bootstrap-Vue表选择单元格

如何解决Bootstrap-Vue表选择单元格

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

希望你能帮助我！

<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",],}
        }
    }
</script>

解决方法

是否可以选择一个或多个表格单元格？

不幸的是，这是不可能的。如您所见，您只能选择整行https://bootstrap-vue.org/docs/components/table#row-select-support。

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

<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",],}
        }
    }
</script>

工作示例：https://codesandbox.io/s/vigilant-leakey-dknvx

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

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