引导vue表选择单元

Question

我正在将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>

Answer 1

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

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

Answer 2

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

不幸的是，这是不可能的。正如您可能看到的，您只能选择整行https://bootstrap-vue.org/docs/components/table#row-选择支持。

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

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

工作样本：https://codesandbox.io/s/vigilant-leakey-dknvx