L'objectif est de créer une disposition personnalisée pour les composants el-descriptions, où la première ligne affiche 3 colonnes (incluant les étiquettes) et les lignes suivantes affichent 4 colonnes. Les approches conventionnelles utilisant labelStyle ou contentStyle pour fusionner des cellulse se sont avérées inefficaces pour ce scénario spécifique.

Tentatives Initiales

1. Échec avec les Styles CSS

Une première tentative conisstait à manipuler les styles pour masquer ou ajuster la largeur des étiquettes afin de permettre aux cellules de contenu de s'étendre. Cependant, définir display: none sur une étiquette entraînait un effondrement de la cellule de contenu vers la position de l'étiquette, déformant ainsi la mise en page. L'ajustement de la largeur présentait également des résultats indésirables.

2. Approche Basée sur la Structure DOM

Une autre approche a été explorée en séparant la première ligne "spéciale" des lignes de description suivantes. Cela impliquait l'utilisation de deux composants el-descriptions imbriqués. Le composant externe agissait comme un conteneur, avec deux el-descriptions-item contenant chacun un composant el-descriptions interne. Bien que cela ait résolu le problème de l'apparence de la table, le manque de spécifications de table cohérentes a entraîné des problèmes d'alignement et une instabilité visuelle entre les deux sections.

<el-descriptions
  :column="2"
  border
  labelstyle="text-align: center; width: 120px;"
  contentStyle="text-align:center;"
>
  <el-descriptions-item labelClassName="labelClass">
    <el-descriptions
      :column="3"
      border
      labelstyle="text-align: center; width: 120px;"
      contentStyle="text-align:center;"
    >
      <el-descriptions-item contentStyle="display:none;">
        <template slot="label">
          label1
        </template>
      </el-descriptions-item>
      <el-descriptions-item labelStyle="display:none;">
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
      <el-descriptions-item labelStyle="display:none;">
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-descriptions-item>

  <el-descriptions-item>
    <el-descriptions>
      <el-descriptions-item
        v-for="(item, index) in tableHead"
        :key="index"
        labelclassName="labelClass"
      >
        <template slot="label">
          {{ "label" + index }}
        </template>
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-descriptions-item>
</el-descriptions>

Bien que l'espacement des cellules ait été corrigé, l'alignement des étiquettes et la cohérence globale de la table restaient problématiques.

Solution Optimale

Une solution plus propre et plus robuste exploite la propriété span des el-descriptions-item. La propriété column d'un el-descriptions définit le nombre d'éléments (paires étiquette-contenu) par ligne. La propriété span d'un el-descriptions-item spécifie combien de colonnes définies par column cet élément doit occuper.

En utilisant span, nous pouvons contrôler précisément comment les éléments s'étendent sur plusieurs colonnes, permettant ainsi de créer la disposition souhaitée sans recourir à des structures imbriquées complexes ou à des manipulations CSS non standards. La propriété labelClassName peut être utilisée pour des modifications de style ciblées, telles que la couleur.

<el-descriptions
  :column="2"
  border
  labelstyle="text-align: center; width: 120px;"
  contentStyle="text-align:center;"
>

  <el-descriptions-item 
    :span="2"   
    labelClassName="labelClass"
  >
    <template slot="label">
      label 
    </template>
    <el-input 
      readonly 
      :value="tableData.is"
    />
    <el-input 
      readonly 
      :value="tableData.vn"
    />
  </el-descriptions-item>
  
  <el-descriptions-item
    v-for="(item, index) in tableHead"
    :key="index"
    labelclassName="labelClass"
  >
    <template slot="label">
      label
    </template>
    <el-input
      readonly
      :value="tableData[item.value]"
      style="width: 100%; text-align: center"
    />
  </el-descriptions-item>
  
</el-descriptions>

Cette approche garantit un alignement précis, évite les décalages et maintient une structure de table cohérente et prévisible.