Checkbox select all dans un tableau

Hello

J'ai plusieurs tableaux qui sont affichées par une boucle.
Dans ces tableaux j'ai ajouté des inputs checkbox pour pouvoir sélectionner toutes les lignes et des checkbox pour chacune des lignes.
J'ai réussi à faire des choses : les éléments se mettent bien dans mon array et les cases sont bien checked ou non checked comme il faut.
Problème : lorsque je clique par exemple sur mes deux premiers checkbox de mes deux premieres lignes et qu'ensuite je clique sur l'input pour tout sélectionner => la sélection s'inverse. C'est à dire qu'au lieu d'avoir 1, 2, 3, 4, 5, 6 par exemple j'ai 3, 4, 5, 6 puisque les 1, 2 sont supprimés.
C'est logique vu mon code, mais je ne vois pas comment faire pour me dépétrer de tout ça maintenant .. je m'y suis sans doute pas forcément bien prise au départ... Une idée pour m'aider ?

J'utilise Vue JS et AntDesign mais le problème est purement du javascript... Comment faire marcher le SELECT ALL dans le cas de tableaux générés à la volée dynamiquement en gros cela pourrait résumer le souci...

Merci de votre aide !

Voici le bout de javascript qui correspond ainsi que le html qui affichent les tableaux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 data() {
    return {
      listQuestions:[],
      columns,
      selectCheck: [],
    }
  },
 onClickCheckAll(value) { //when click to all chekckbox
      console.log("click")
      console.log(value)
      console.log(value.sousDimensions)
 
      for (var sousdim of value.sousDimensions)
      {
        for (var item of sousdim.questions)
        {
          console.log(this.selectCheck)
 
          const p = this.selectCheck.indexOf(item.id) //looking for index for each item
 
          const checkboxItem = document.querySelector("#choice-" + item.id) //all inputs with id choice-ID and then add or remove "checked" attribute
 
          if (p > -1) { //if still there, delete
            this.selectCheck.splice(p, 1);
 
            if (!item.barometre)
            {
              checkboxItem.checked=false
            }
 
          }
          else { //if not, adding in array
            this.selectCheck.push(item.id)
            checkboxItem.checked=true
          }
 
        }
      }
    },
 
    onClickOneCheckbox(val) {
 
      const index = this.selectCheck.indexOf(val);
      if (index > -1) //delete item if still in the array
      {
        this.selectCheck.splice(index, 1);
      }
      else
      {
        this.selectCheck.push(val)
      }
 
      console.log(this.selectCheck)
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <div v-for="(dimension, index) in listQuestions" :key="index" :header="`${dimension.name}`">
 
            <table class="table-questions" >
 
                <thead>
                  <tr>
                    <th><input type="checkbox" @click="onClickCheckAll(dimension)"  /></th>
                    <th>Sous-dimension</th>
                    <th>Item</th>
                  </tr>
                </thead>
 
                <tbody v-for="(question,i) in dimension.sousDimensions" >
 
                  <tr v-for="(item, p) in question.questions">
 
                    <!--some questions "barometre" disabled and checked by default-->
                    <td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
                    <td v-else ><input type="checkbox" @click="onClickOneCheckbox(item.id)"  :id="'choice-' + item.id" /> </td>
                    <td style="width: 40%">{{question.name}}</td>
                    <td >{{item.item}}</td>
 
                  </tr>
 
                </tbody>
 
            </table>
 
 
          </div>

Pour plus de facilité : ici mon problème : https://jsfiddle.net/chtouk/rc80ksno/35/