Vue clicks one highlight and clicks multiple highlights

1. There are three modes: single table, split table, and parallel table. You can only choose one table for a single table, and you can choose two

for sharing or merging tables.

2. In single-table mode:
clipboard.png
;:

-1- template
clipboard.png

-2-
currentLitableId

3.:
clipboard.png

Mar.10,2021

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

when you assemble the table, you can judge the selected includes table

.
Menu