制作一个 Bootstrap Vue 表以选择最多 3 个项目答案

【问题标题】：Make a Bootstrap Vue table to select max 3 items制作一个 Bootstrap Vue 表以选择最多 3 个项目
【发布时间】：2019-12-12 03:27:01
【问题描述】：

我的 Bootstrap Vue 表仅存在视觉问题，我希望用户最多选择 3 个项目，当我打印所选项目数组并尝试选择第 4 个项目时，它确实只显示了 3 个项目，但在视觉上它似乎是第 4 个被选中的项目

<b-table selectable :select-mode="'multi'" :items="items" :fields="fields" @row-selected="onRowSelected" responsive="lg" id="my-table" :per-page="perPage" :current-page="currentPage" small>
     <template v-slot:cell(seleccionado)="{ rowSelected }">
        <template v-if="rowSelected && selected.length<=3">
        <span aria-hidden="true">&check;</span>
        <span class="sr-only">Seleccionado</span>
      </template>
      <template v-else>
        <span aria-hidden="true">&nbsp;</span>
        <span class="sr-only">No seleccionado</span>
      </template>
  </template>
</b-table>

  <div class="d-flex flex-row-reverse bd-highlight">
       <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
  </div>

export default {
    data() {
        return {
            perPage: 10,
            currentPage: 1,
            fields: ['seleccionado', 'one', 'two', 'three', 'four'],
            items: [
               //All my items here
            ],
            selected: [],
        }
    },
    computed: {
        rows() {
            return this.items.length
        }
    },

    methods: {
        onRowSelected(items) {
            if (this.selected.length<3)
                this.selected = items
            else alert("You can select only 3 items\n");
        },

    }
}

【问题讨论】：

标签： vue.js

【解决方案1】：

一种解决方案是手动取消选择该行。

 onRowSelected(items) {
    const limit = 3
    let selected = items
    if (this.items.length > limit) {
      selected = items.slice(0, limit)
    }
    const toUnselected = items.slice(limit)
    toUnselected.forEach(item => {
      const idx = this.items.findIndex(it => item == it)
      if (idx >= 0) {
        this.$refs.selectableTable.unselectRow(idx)
      }
    })
    this.selected = items
  }

注意，ref=selectableTable需要添加到<b-table>

您可以在codepen here查看演示

【讨论】：