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

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

Introduction :
Avec le développement rapide d'Internet, le traitement et le filtrage des données sont devenus une partie importante de nombreuses applications. En tant que framework JavaScript populaire, Vue.js fournit de puissantes fonctionnalités de liaison de données et de réactivité, facilitant le traitement et le filtrage des données. Element-UI est une bibliothèque de composants d'interface utilisateur riche en fonctionnalités qui fournit de riches fonctions de table et de filtrage et peut être utilisée en combinaison avec Vue.js. Cet article expliquera comment utiliser Vue et Element-UI pour le filtrage et le filtrage des données, et donnera des exemples de code correspondants.

Processus d'implémentation :

1. Installation de Vue et Element-UI :
   Tout d'abord, utilisez npm ou Yarn pour installer Vue et Element-UI. Exécutez la commande suivante dans le répertoire racine du projet :

   npm install --save vue
   npm install --save element-ui

2. Introduisez Vue et Element-UI :
   Introduisez les composants et les styles liés à Vue et Element-UI via l'instruction d'importation dans la page qui doit être utilisée.

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

3. Définir les conditions de données et de filtrage :
   Définissez les conditions de données et de filtrage qui doivent être filtrées dans l'instance Vue. Par exemple, définissez un tableau nommé "items" et une condition de filtre nommée "filter":

   data() {
     return {
    items: [
      { name: 'Apple', price: 10 },
      { name: 'Banana', price: 20 },
      { name: 'Orange', price: 30 },
    ],
    filter: '',
     }
   }

4. Liez la condition de filtre à l'aide du composant d'entrée d'Element-UI :
   Liez le filtre à l'aide du composant d'entrée de Element-UI Condition , et liez la condition de filtre à la propriété "filter" de l'instance Vue.

   <el-input v-model="filter"></el-input>

5. Utilisez des propriétés calculées pour le filtrage des données :
   Utilisez des propriétés calculées pour filtrer les données en fonction de critères de filtrage.

   computed: {
     filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.filter.toLowerCase())
    })
     }
   }

6. Affichez les données filtrées dans le tableau :
   Utilisez le composant Table d'Element-UI pour afficher les données filtrées dans le tableau.

   <el-table :data="filteredItems">
     <el-table-column prop="name" label="名称"></el-table-column>
     <el-table-column prop="price" label="价格"></el-table-column>
   </el-table>

Exemple de code :

<template>
  <div>
    <el-input v-model="filter" placeholder="请输入关键字进行过滤"></el-input>
    <br>
    <el-table :data="filteredItems">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

export default {
  data() {
    return {
      items: [
        { name: 'Apple', price: 10 },
        { name: 'Banana', price: 20 },
        { name: 'Orange', price: 30 },
      ],
      filter: '',
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.filter.toLowerCase())
      })
    }
  }
}
</script>

<style>
/* 样式定义省略 */
</style>

Résumé :
Cet article explique comment utiliser Vue et Element-UI pour le filtrage et le filtrage des données, et donne des exemples de code pertinents. En utilisant les fonctionnalités réactives fournies par Vue et les riches composants fournis par Element-UI, nous pouvons facilement implémenter des fonctions de filtrage et de filtrage des données. J'espère que cet article sera utile aux développeurs qui utilisent Vue et Element-UI pour le filtrage et le filtrage des données.

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!