Comment utiliser Vue et Element-UI pour naviguer et filtrer les données

Comment utiliser Vue et Element-UI pour implémenter la navigation et le filtrage des données

La navigation et le filtrage sont l'une des fonctions courantes des applications Web. Ils peuvent permettre aux utilisateurs de trouver plus facilement les informations dont ils ont besoin. Avec le puissant support de Vue et Element-UI, nous pouvons facilement implémenter ces deux fonctions.

Cet article expliquera comment utiliser Vue et Element-UI pour implémenter la navigation et le filtrage des données. Nous prendrons comme exemple un système simple de gestion des étudiants pour montrer comment afficher une liste d'étudiants dans l'interface et la faire fonctionner via la navigation et le filtrage.

Tout d'abord, nous devons préparer certaines données sur les étudiants. Dans l'instance Vue, nous pouvons définir un tableau appelé étudiants qui contient des informations sur chaque étudiant. Les informations de chaque élève peuvent inclure des attributs tels que la pièce d'identité, le nom, l'âge, etc.

Ensuite, nous devons afficher la liste des étudiants sur l'interface. Nous pouvons utiliser le composant Table fourni par Element-UI pour y parvenir. Dans le modèle de l'instance Vue, nous pouvons utiliser la balise el-table pour créer un tableau et définir chaque colonne du tableau en utilisant la balise el-table-column. Nous pouvons utiliser le tableau des étudiants comme source de données du tableau et afficher l'identifiant, le nom et l'âge de chaque élève dans différentes colonnes du tableau.

Sur la base de l'affichage de la liste des étudiants, nous pouvons ajouter une fonction de navigation. Vue et Element-UI fournissent des composants de pagination pour nous aider à implémenter des fonctions de navigation. Nous pouvons utiliser la balise el-pagination dans le modèle pour créer un paginateur, spécifier le nombre total d'éléments de données en définissant l'attribut total et spécifier le nombre de données affichées sur chaque page en définissant l'attribut page-size. Nous pouvons également obtenir le numéro de page sur lequel l'utilisateur a cliqué sur le paginateur en écoutant l'événement de changement en cours, puis mettre à jour les données affichées en recalculant l'index de début et l'index de fin de la liste des étudiants dans l'instance Vue.

Sur la base de la fonction de navigation, nous pouvons ajouter des fonctions de filtrage supplémentaires. Vue et Element-UI fournissent une variété de composants d'entrée pour nous aider à implémenter des fonctions de filtrage. Nous pouvons utiliser la balise el-input dans le modèle pour créer une zone de saisie et lier la valeur de la zone de saisie à une propriété de l'instance Vue via la directive v-model. Ensuite, nous pouvons utiliser l'attribut calculé dans l'instance Vue pour filtrer la liste des étudiants qui remplissent les conditions et la mettre à jour dans le tableau affiché en tant que source de données.

Ce qui suit est un exemple de code complet :

<template>
  <div>
    <el-input v-model="searchValue" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="filteredStudents" style="width: 100%">
      <el-table-column prop="id" label="学生ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :total="students.length"
      :page-size="pageSize"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
        // 更多学生数据...
      ],
      currentPage: 1,
      pageSize: 10,
      searchValue: ''
    };
  },
  computed: {
    filteredStudents() {
      let filtered = this.students;
      if (this.searchValue) {
        filtered = filtered.filter(student =>
          student.name.includes(this.searchValue)
        );
      }
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filtered.slice(startIndex, endIndex);
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

Dans l'exemple de code ci-dessus, nous avons défini un attribut nommé searchValue pour enregistrer les mots-clés de recherche saisis par l'utilisateur et filtré les conditions en fonction de searchValue et currentPage via l'attribut calculé filteredStudents list. des élèves et les afficher dans un tableau.

A travers cet exemple, nous pouvons voir qu'il est très simple d'utiliser Vue et Element-UI pour naviguer et filtrer les données. Avec seulement quelques lignes de code, vous pouvez offrir aux utilisateurs une bonne expérience interactive et les aider à trouver rapidement les informations dont ils ont besoin. J'espère que cet article pourra vous être utile !

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!