鍍金池/ 問答/人工智能  HTML/ Vue點(diǎn)擊一個(gè)高亮，與點(diǎn)擊多個(gè)高亮

Vue點(diǎn)擊一個(gè)高亮，與點(diǎn)擊多個(gè)高亮

1.一共三個(gè)模式：?jiǎn)巫?，拼桌，并桌，單桌只能選一個(gè)桌子，拼桌或者并桌可以選兩個(gè)

2.單桌模式下：
clipboard.png
點(diǎn)擊桌位可以只可以選擇一個(gè)，并高亮；實(shí)現(xiàn)代碼如下：

-1- template部分
clipboard.png

-2- 事件部分
在點(diǎn)擊事件中，將currentLi設(shè)置成tableId即可

3.問題：這樣做的話，拼桌或者并桌模式下，不知道怎么才能點(diǎn)擊兩個(gè)，并高亮這樣的效果？
clipboard.png

回答
編輯回答
離殤

拼桌的時(shí)候 判斷 selected includes 這一桌就可

2018年2月26日 05:46
編輯回答
故人嘆
<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]
  }
}
2017年9月29日 12:45