element vue affiche dynamiquement les colonnes cachées

Lors de la création de pages à l'aide de Vue.js et Element UI, vous devez souvent utiliser des tableaux pour afficher les données. Parfois, il est nécessaire d'afficher ou de masquer dynamiquement certaines colonnes afin que les utilisateurs puissent adapter les informations requises à leurs besoins. Element UI fournit un composant de tableau pratique, facile à utiliser et puissant. Cet article se concentrera sur la façon d'afficher ou de masquer dynamiquement les colonnes dans les tableaux Element UI.

1. Idée de base
Le composant table dans Element UI fournit des objets de colonne, et chaque objet de colonne peut définir les propriétés d'une colonne. Par conséquent, si vous souhaitez afficher ou masquer dynamiquement une colonne, vous pouvez ajouter un attribut de contrôle v-if à l'objet colonne.

2. Exemple d'analyse
Ici, nous prenons le composant el-table dans Element UI comme exemple pour montrer comment afficher ou masquer dynamiquement des colonnes via Vue.js. Supposons que nous ayons un ensemble de données comme indiqué ci-dessous. Les colonnes « Encodage » et « Statut » sont des colonnes qui doivent être affichées ou masquées dynamiquement.

1. Tout d'abord, ajoutez le code suivant au modèle de tableau :

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. Ajoutez l'option data à la balise de script et ajoutez deux attributs de données, showCode et showStatus, avec des valeurs initiales​​true.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. Enfin, modifiez les valeurs de showCode et showStatus dans l'événement click pour afficher ou masquer dynamiquement les colonnes. Par exemple :

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

Après avoir cliqué sur le bouton "Afficher/Masquer l'encodage", vous pouvez voir l'effet comme indiqué ci-dessous. Lorsque la valeur de showCode est vraie, la colonne « Encodage » est affichée ; lorsque la valeur de showCode est fausse, la colonne « Encodage » est masquée.

4. Résumé
Cet article explique comment afficher ou masquer dynamiquement des colonnes dans le composant de table Element UI. Il nous suffit d'ajouter un attribut de contrôle v-if à l'objet colonne et de modifier sa valeur dans l'opération appropriée pour implémenter facilement cette fonction. Cette méthode permet aux utilisateurs de sélectionner librement les informations dont ils ont besoin en fonction de leurs besoins, améliorant ainsi la flexibilité et la personnalisation de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!