So verwenden Sie Vue und Element-UI zum Filtern und Filtern von Daten

So verwenden Sie Vue und Element-UI zum Filtern und Filtern von Daten

Einführung:
Mit der rasanten Entwicklung des Internets sind Datenverarbeitung und -filterung zu einem wichtigen Bestandteil vieler Anwendungen geworden. Als beliebtes JavaScript-Framework bietet Vue.js leistungsstarke Datenbindungs- und Reaktionsfunktionen, die die Datenverarbeitung und -filterung erleichtern. Element-UI ist eine funktionsreiche UI-Komponentenbibliothek, die umfangreiche Tabellen- und Filterfunktionen bietet und gut in Kombination mit Vue.js verwendet werden kann. In diesem Artikel wird die Verwendung von Vue und Element-UI zum Filtern und Filtern von Daten vorgestellt und entsprechende Codebeispiele gegeben.

Implementierungsprozess:

1. Installation von Vue und Element-UI:
   Verwenden Sie zunächst npm oder Yarn, um Vue und Element-UI zu installieren. Führen Sie den folgenden Befehl im Projektstammverzeichnis aus:

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

2. Führen Sie Vue und Element-UI ein:
   Führen Sie die relevanten Komponenten und Stile von Vue und Element-UI über die Importanweisung in die Seiten ein, die verwendet werden müssen.

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

3. Daten und Filterbedingungen definieren:
   Definieren Sie die Daten und Filterbedingungen, die in der Vue-Instanz gefiltert werden müssen. Definieren Sie beispielsweise ein Array mit dem Namen „items“ und eine Filterbedingung mit dem Namen „filter“:

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

4. Binden Sie die Filterbedingung mithilfe der Eingabekomponente von Element-UI:
   Binden Sie den Filter mithilfe der Eingabekomponente von Element-UI Condition , und binden Sie die Filterbedingung an die Eigenschaft „filter“ der Vue-Instanz.

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

5. Verwenden Sie berechnete Eigenschaften zum Filtern von Daten:
   Verwenden Sie berechnete Eigenschaften, um Daten basierend auf Filterkriterien zu filtern.

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

6. Zeigen Sie die gefilterten Daten in der Tabelle an:
   Verwenden Sie die Tabellenkomponente von Element-UI, um die gefilterten Daten in der Tabelle anzuzeigen.

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

Beispielcode:

<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>

Zusammenfassung:
Dieser Artikel stellt die Verwendung von Vue und Element-UI zum Filtern und Filtern von Daten vor und enthält relevante Codebeispiele. Durch die Verwendung der reaktionsfähigen Funktionen von Vue und der umfangreichen Komponenten von Element-UI können wir Datenfilterung und Filterfunktionen problemlos implementieren. Ich hoffe, dass dieser Artikel für Entwickler hilfreich ist, die Vue und Element-UI zum Filtern und Filtern von Daten verwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI zum Filtern und Filtern von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!