Comment filtrer et trier les données à l'aide de Vue et Element-UI

Comment utiliser Vue et Element-UI pour le filtrage et le tri des données

Vue.js est un framework JavaScript très populaire, et Element-UI est une bibliothèque de composants basée sur Vue, qui fournit un riche ensemble de composants d'interface utilisateur pouvant être utilisés pour simplifier notre travail de développement. Dans de nombreux projets réels, nous devons généralement filtrer et trier les données, alors comment utiliser Vue et Element-UI pour répondre à ces exigences ? Dans cet article, nous apprendrons comment utiliser Vue et Element-UI pour filtrer et trier les données.

Tout d'abord, nous devons introduire Element-UI dans le projet Vue. Si vous n'utilisez pas déjà Vue et Element-UI, vous pouvez les installer via npm.

npm install vue
npm install element-ui

Une fois l'installation terminée, nous devons introduire le style Element-UI et Vue.use() dans le fichier main.js.

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

Ensuite, nous pouvons créer un composant appelé DataFilterSort, dans lequel nous montrons comment utiliser Vue et Element-UI pour filtrer et trier les données.

<template>
  <div>
    <el-row>
      <el-input v-model="keyword" placeholder="请输入关键字" class="inputItem"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-row>
    <el-table :data="filteredData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '', // 筛选关键字
      data: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' }
      ]
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.name.indexOf(this.keyword) !== -1;
      });
    }
  },
  methods: {
    search() {
      // 筛选功能
    }
  }
};
</script>

<style scoped>
.inputItem {
  width: 200px;
  margin-right: 10px;
}
</style>

Dans cet exemple, nous avons introduit un composant appelé DataFilterSort. Tout d'abord, nous avons ajouté une zone de saisie et un bouton de recherche au modèle pour saisir des mots-clés de filtre et déclencher la fonction de recherche. Ensuite, nous utilisons le composant el-table d'Element-UI pour afficher les données et spécifions les champs de données et les noms d'étiquettes à afficher dans el-table-column. De plus, nous activons également la fonction triable du champ age en définissant l'attribut triable de el-table-column.

Dans data, nous déclarons un attribut de données nommé mot-clé pour enregistrer la valeur de la zone de saisie. En mode calculé, nous définissons une propriété calculée nommée filteredData, qui utilise la méthode de filtrage du tableau pour filtrer les données. La condition de filtre est de savoir si le champ de nom contient la valeur du mot-clé. Dans les méthodes, nous définissons une méthode appelée recherche pour implémenter la fonction de filtrage des données.

Lorsque le mot-clé change, l'attribut calculé filteredData sera recalculé pour implémenter la fonction de filtrage des données. Lorsque vous cliquez sur le bouton de recherche, la méthode de recherche sera déclenchée pour filtrer les données.

Essayez d'utiliser ce composant dans un projet Vue. Nous constaterons qu'après avoir saisi des mots-clés, les données seront filtrées selon les conditions de filtrage et affichées sur la page en temps réel. En cliquant sur la colonne âge dans l'en-tête du tableau, les données seront triées selon l'âge.

Grâce aux exemples de cet article, je pense que vous maîtrisez comment utiliser Vue et Element-UI pour filtrer et trier les données. Ces fonctions peuvent nous aider à exploiter les données plus facilement et à améliorer l'efficacité du développement. Je vous souhaite de meilleurs résultats dans le développement de Vue et Element-UI !

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!