Vue点击一个高亮，与点击多个高亮

Question

1.一共三个模式：单桌，拼桌，并桌，单桌只能选一个桌子，拼桌或者并桌可以选两个

2.单桌模式下：

点击桌位可以只可以选择一个，并高亮；实现代码如下：

-1- template部分

-2- 事件部分
在点击事件中，将currentLi设置成tableId即可

3.问题：这样做的话，拼桌或者并桌模式下，不知道怎么才能点击两个，并高亮这样的效果？

Answer 1

<li @click="selectPos(tb.tableId)" :data-tableid="tb.tableId" :class="{active: isActive(tb.tableId)}"></li>

data () {
  return {
    tb: [...],
    mode: '单桌',
    selected: []
  }
},
methods: {
  select(tableId) {
    int max = this.mode == '单桌' ? 1: 2
    if(max > this.selected.length) { return }
    this.selected[tabledId] = active
  },
  isActive(tableId) {
    return this.selected[tableId]
  }
}

Answer 2

拼桌的时候 判断 selected includes 这一桌就可