Structuration d'un selecteur reelisable dans une grille tabulaire

L'integration d'un composant de selection multiple a l'interieur d'une colonne de el-table impose une gestion rigoureuse des liaisons de donnees. Chaque ligne doit detenir sa propre instance reactive afin d'eviter les conflits de synchronisation lors de la saisie ou de la filtration.

Modele de template et liaison de données

Le champs de configuraton doit obligatoirement pointer vers un tableau vide initialise dans le contexte de la ligne. Le mode multiple active automatiquement cette contrainte.

<el-table-column prop="listeConfigs" header-align="center" align="center" label="Options">
  <template slot-scope="{ row }">
    <el-select
      v-model="row.validesActuelles"
      clearable
      filterable
      multiple
      @change="traiterModification(row)"
    >
      <el-option
        v-for="optionItem in row.disponibles"
        :key="optionItem.identifiant"
        :label="optionItem.designation"
        :value="optionItem.identifiant"
      />
    </el-select>
  </template>
</el-table-column>

Pre-alimentation des valeurs par défaut

Apres reception de la payload serveur, il est necessaire d'identifier les propositions marquees comme initiales et de les injecter dans le tableau de liaison. Pour garantir la reactivite instantanee sans recourir a des mises a jour artificielles, il est preferable de reconstruire les objets ligne avec une fusion explicite.

chargerDonneesProduction(codeArticle) {
  this.enCoursDeTraitement = true;
  
  return this.$http.get('/api/inventaire/recuperer', {
    params: { codeArticle }
  }).then(reponse => {
    let grilleMiseAJour = [];
    
    reponse.result.data.forEach((itemCrud, position) => {
      // Extraction des configuracions par defaut
      const valeursInitiales = itemCrud.optionList
        .filter(opt => opt.valeurParDefaut === 'true')
        .map(opt => ({ designation: opt.texteAffichage, identifiant: opt.codeUnique }));
        
      // Injection propre dans la structure reactive
      grilleMiseAJour[position] = {
        ...itemCrud,
        validesActuelles: valeursInitiales.length ? valeursInitiales.map(v => v.identifiant) : []
      };
    });
    
    this.grilleAffichage = grilleMiseAJour;
  }).finally(() => {
    this.enCoursDeTraitement = false;
  });
}

Résolution des blocages de reactivité Vue

Un comportement frequent consiste a voir le filtre ou les selections subsequentes devenir non fonctionnelles apres remplissage initial. Cette enomalie provient souvent de mutations directes qui ne sont pas correctement observees par le systeme de suivi Vue, notamment sur les collections internes aux composants torisiemes parties.

La contre-mesure fiable consiste a declencher un nouveau cycle de diffusions en reassignant la source du tableau, ce qui invalide les caches internes d'Element UI et restaure l'ecoute des evenements.

traiterModification(ligneActive) {
  // Reconduction profonde du tableau pour forcer la reconciliation DOM
  ligneActive.disponibles = Object.assign([], ligneActive.disponibles);
  
  // Alternative moderne si le framework le supporte pleinement :
  // this.$set(ligneActive, 'disponibles', ligneActive.disponibles);
}