Cara menggunakan Vue dan Element-UI untuk penapisan dan penapisan data

Cara menggunakan Vue dan Element-UI untuk penapisan dan penapisan data

Pengenalan:
Dengan perkembangan pesat Internet, pemprosesan dan penapisan data telah menjadi bahagian penting dalam banyak aplikasi. Sebagai rangka kerja JavaScript yang popular, Vue.js menyediakan ciri pengikatan data dan responsif yang berkuasa, menjadikan pemprosesan dan penapisan data lebih mudah. Element-UI ialah perpustakaan komponen UI yang kaya dengan ciri yang menyediakan jadual kaya dan fungsi penapisan serta boleh digunakan dengan baik dalam kombinasi dengan Vue.js. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk penapisan dan penapisan data serta memberikan contoh kod yang sepadan.

Proses pelaksanaan:

1. Pemasangan Vue dan Element-UI:
   Pertama, gunakan npm atau yarn untuk memasang Vue dan Element-UI. Jalankan arahan berikut dalam direktori akar projek:

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

2. Perkenalkan Vue dan Element-UI:
   Perkenalkan komponen dan gaya yang berkaitan Vue dan Element-UI ke dalam halaman yang perlu digunakan melalui pernyataan import.

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

3. Tentukan data dan syarat penapis:
   Tentukan data dan syarat penapis yang perlu ditapis dalam tika Vue. Sebagai contoh, tentukan tatasusunan bernama "item" dan keadaan penapis bernama "penapis":

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

4. Ikat keadaan penapis menggunakan komponen Input Element-UI:
   Ikat penapis menggunakan komponen Input Keadaan Element-UI , dan ikat keadaan penapis pada sifat "penapis" tika Vue.

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

5. Gunakan sifat yang dikira untuk penapisan data:
   Gunakan sifat yang dikira untuk menapis data berdasarkan kriteria penapis.

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

6. Paparkan data yang ditapis dalam jadual:
   Gunakan komponen Jadual Elemen-UI untuk memaparkan data yang ditapis dalam jadual.

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

Contoh kod:

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

Ringkasan:
Artikel ini memperkenalkan cara menggunakan Vue dan Element-UI untuk penapisan dan penapisan data, serta memberikan contoh kod yang berkaitan. Dengan menggunakan ciri responsif yang disediakan oleh Vue dan komponen kaya yang disediakan oleh Element-UI, kami boleh melaksanakan fungsi penapisan dan penapisan data dengan mudah. Saya harap artikel ini akan membantu pembangun yang menggunakan Vue dan Element-UI untuk penapisan dan penapisan data.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk penapisan dan penapisan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!