Comment obtenir l'effet de pliage de lignes cachées de la table Vue

Vue est un framework JavaScript populaire pour créer des applications Web interactives et hautes performances. Dans les applications Vue, les tableaux sont des composants d'interface utilisateur courants et il est souvent nécessaire d'implémenter des effets de repliement de lignes cachés pour améliorer l'expérience utilisateur. Cet article présentera une méthode pour obtenir l'effet de pliage des lignes cachées dans les tables Vue.

Étapes d'implémentation

1. Dans le modèle du composant Vue, définissez la structure de base de la table. Utilisez la directive v-for pour parcourir les données de ligne de la table rendue à partir de la source de données. Parmi eux, vous devez ajouter une ligne liée à l'événement click pour déclencher l'effet de pliage de ligne. L'exemple de code est le suivant :

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.height}}</td>
          <td class="fold" @click="foldRow(index)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

2. Définissez des variables dans l'attribut data du composant pour déterminer si les lignes du tableau doivent être pliées. Et lors de l'initialisation du composant, définissez l'état de toutes les lignes sur déplié. L'exemple de code est le suivant :

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: '20', height: '180' },
        { name: '小红', age: '19', height: '170' },
        { name: '小刚', age: '22', height: '185' },
      ],
      foldArr: [],
    };
  },
  created() {
    this.foldArr = new Array(this.tableData.length).fill(false);
  },
  methods: {
    foldRow(index) {
      this.foldArr.splice(index, 1, !this.foldArr[index]);
    },
  },
};
</script>

3. Définissez un composant qui réduit les lignes. Le modèle du composant contient du contenu qui doit être réduit. Lorsqu'une ligne doit être pliée, le contenu caché est rendu. L'exemple de code de composant est le suivant :

<template>
  <div v-show="foldArr[index]">
    <p>{{item.intro}}</p>
  </div>
</template>

<script>
export default {
  props: ['item', 'index', 'foldArr'],
};
</script>

4. Dans le corps du tableau, ajoutez un tr contenant le composant de ligne pliée. Utilisez l'instruction v-if pour déterminer si la ligne actuelle doit être pliée. Si elle est pliée, restituez le composant de ligne pliée. L'exemple de code est le suivant :

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.height}}</td>
          <td class="fold" @click="foldRow(index)"></td>
        </tr>
        <tr v-for="(item,index) in tableData" :key="index">
          <td colspan="4" v-if="foldArr[index]">
            <fold-row :item="item" :index="index" :foldArr="foldArr"></fold-row>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import FoldRow from '@/components/FoldRow.vue';

export default {
  components: {
    FoldRow,
  },
  data() {
    return {
      tableData: [
        { name: '小明', age: '20', height: '180', intro: '我是小明，今年20岁，身高180cm' },
        { name: '小红', age: '19', height: '170', intro: '我是小红，今年19岁，身高170cm' },
        { name: '小刚', age: '22', height: '185', intro: '我是小刚，今年22岁，身高185cm' },
      ],
      foldArr: [],
    };
  },
  created() {
    this.foldArr = new Array(this.tableData.length).fill(false);
  },
  methods: {
    foldRow(index) {
      this.foldArr.splice(index, 1, !this.foldArr[index]);
    },
  },
};
</script>

5. Pour le traitement du style, vous pouvez utiliser CSS pour le contrôler. En définissant la largeur et la hauteur de .fold sur 0, cela ne prend pas de place. En définissant les styles des pseudo-éléments .fold:before et .fold:after, vous pouvez changer l'icône de pliage. L'exemple de code est le suivant :

<style lang="scss">
.fold {
  position: relative;
  width: 0;
  height: 0;
  &:before,
  &:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #999;
    transition: all 0.2s ease;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
}
.fold.folded:before {
  transform: translateY(2px) translateX(-50%) rotate(45deg);
}
.fold.folded:after {
  transform: translateY(-2px) translateX(-50%) rotate(-45deg);
}
</style>

Jusqu'à présent, nous avons implémenté avec succès l'effet de pliage de lignes cachées de la table Vue. Grâce à cette méthode, nous pouvons facilement améliorer l'expérience utilisateur et permettre aux utilisateurs de visualiser et de gérer plus facilement les données des tableaux.

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!