Cara melaksanakan fungsi carian dan penapisan melalui vue dan Element-plus

Cara melaksanakan fungsi carian dan penapisan melalui Vue dan Element-Plus

Petikan:
Dalam aplikasi web moden, fungsi carian dan penapisan merupakan bahagian yang sangat penting, membantu pengguna mencari maklumat yang mereka perlukan dengan cepat. Vue ialah rangka kerja JavaScript yang popular, dan Element-Plus ialah perpustakaan komponen UI untuk Vue Gabungan mereka boleh melaksanakan fungsi carian dan penapisan dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-Plus untuk melaksanakan fungsi ini dan memberikan contoh kod yang berkaitan.

1. Persediaan
   Pertama, kita perlu memasang Vue dan Element-Plus. Anda boleh memasangnya dengan arahan berikut:

npm install vue
npm install element-plus

2. Cipta Apl Vue
   Seterusnya, kita perlu mencipta aplikasi Vue. Kita boleh menggunakan alat perancah Vue untuk mencipta aplikasi asas Vue. Jalankan arahan berikut dalam baris arahan:

vue create search-filter-app
cd search-filter-app

Kemudian, pilih pilihan konfigurasi mengikut gesaan, atau terus gunakan konfigurasi lalai untuk menjana aplikasi Vue.

3. Import komponen Element-Plus
   Dalam aplikasi Vue yang dibuat, kami perlu mengimport komponen Element-Plus yang berkaitan. Buka fail src/main.js dan tambahkan kod berikut: src/main.js文件，并添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'

createApp(App).use(ElementPlus).mount('#app')

这里我们使用了ES6的模块导入语法，导入了createApp函数和需要使用的Element-Plus组件。然后我们使用createApp函数创建了一个Vue应用，并在应用中使用了Element-Plus。

4. 创建搜索和过滤组件
   我们可以创建两个Vue组件来实现搜索和过滤功能。在src/components目录下创建两个文件SearchBar.vue和FilterBar.vue。在SearchBar.vue文件中添加以下代码：

<template>
  <div>
    <el-input v-model="searchKeyword" placeholder="请输入搜索关键字"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: ''
    }
  },
  watch: {
    searchKeyword(newKeyword) {
      this.$emit('search', newKeyword)
    }
  }
}
</script>

在FilterBar.vue文件中添加以下代码：

<template>
  <div>
    <el-select v-model="filterOption" placeholder="请选择过滤条件" @change="filterData">
      <el-option label="选项1" value="option1"></el-option>
      <el-option label="选项2" value="option2"></el-option>
      <el-option label="选项3" value="option3"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterOption: ''
    }
  },
  methods: {
    filterData() {
      this.$emit('filter', this.filterOption)
    }
  }
}
</script>

这里，我们分别创建了两个组件，并在组件中使用了Element-Plus的输入框和下拉选择框组件。注意，在SearchBar组件中我们使用了v-model指令来实现双向数据绑定，并在watch选项中监听searchKeyword的变化，并通过$emit方法将值传递给父组件。

5. 使用搜索和过滤组件
   在App组件中，我们可以使用之前创建的搜索和过滤组件。打开src/App.vue文件，并添加以下代码：

<template>
  <div>
    <SearchBar @search="handleSearch"></SearchBar>
    <FilterBar @filter="handleFilter"></FilterBar>
    <ul>
      <li v-for="item in filteredData" v-bind:key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import SearchBar from './components/SearchBar.vue'
import FilterBar from './components/FilterBar.vue'

export default {
  components: {
    SearchBar,
    FilterBar
  },
  data() {
    return {
      data: [
        { id: 1, name: 'item1', option: 'option1' },
        { id: 2, name: 'item2', option: 'option2' },
        { id: 3, name: 'item3', option: 'option3' }
      ],
      searchKeyword: '',
      filterOption: ''
    }
  },
  computed: {
    filteredData() {
      let result = this.data
      if (this.searchKeyword) {
        result = result.filter(item => item.name.toLowerCase().includes(this.searchKeyword.toLowerCase()))
      }
      if (this.filterOption) {
        result = result.filter(item => item.option === this.filterOption)
      }
      return result
    }
  },
  methods: {
    handleSearch(keyword) {
      this.searchKeyword = keyword
    },
    handleFilter(option) {
      this.filterOption = option
    }
  }
}
</script>

这里，我们在App组件中导入了SearchBar和FilterBar组件，并通过<SearchBar @search="handleSearch"></SearchBar>和<FilterBar @filter="handleFilter"></FilterBar>将事件绑定到App组件的方法上。在data中定义了一个数据数组，并根据搜索关键字和过滤条件进行过滤得到filteredData数组。然后使用v-for指令将filteredData数组中的每个元素渲染为列表项。

6. 运行代码
   最后，我们可以在命令行中运行以下命令来启动应用程序：

npm run serve

然后在浏览器中访问http://localhost:8080

rrreee

Di sini kami menggunakan sintaks import modul ES6 dan mengimport fungsi createApp dan Elemen yang memerlukan untuk digunakan -Plus komponen. Kemudian kami menggunakan fungsi createApp untuk mencipta aplikasi Vue dan menggunakan Element-Plus dalam aplikasi.

Buat komponen carian dan penapis🎜Kami boleh mencipta dua komponen Vue untuk melaksanakan fungsi carian dan penapis. Cipta dua fail SearchBar.vue dan FilterBar.vue dalam direktori src/components. Tambahkan kod berikut dalam fail SearchBar.vue: 🎜🎜rrreee🎜Tambahkan kod berikut dalam fail FilterBar.vue: 🎜rrreee🎜Di sini, kami telah mencipta dua komponen masing-masing , dan menggunakan kotak input Element-Plus dan komponen kotak pilihan lungsur turun dalam komponen. Ambil perhatian bahawa dalam komponen SearchBar kami menggunakan arahan v-model untuk melaksanakan pengikatan data dua hala dan memantau dalam pilihan <code>watch searchKeyword menukar dan menghantar nilai kepada komponen induk melalui kaedah $emit. 🎜
🎜Menggunakan komponen carian dan penapis🎜Dalam komponen Apl, kami boleh menggunakan komponen carian dan penapis yang kami buat sebelum ini. Buka fail src/App.vue dan tambahkan kod berikut: 🎜🎜rrreee🎜Di sini, kami telah mengimport komponen SearchBar dan FilterBar dalam komponen App dan lulus <SearchBar @search= " handleSearch"></SearchBar> dan <FilterBar @filter="handleFilter"></FilterBar> mengikat peristiwa pada kaedah komponen Apl. Tatasusunan data ditakrifkan dalam data, dan ditapis mengikut kata kunci carian dan syarat penapis untuk mendapatkan tatasusunan data yang ditapis. Kemudian gunakan arahan v-for untuk menjadikan setiap elemen dalam tatasusunan FilteredData sebagai item senarai. 🎜
🎜Jalankan kod🎜Akhir sekali, kita boleh memulakan aplikasi dengan menjalankan arahan berikut dalam baris arahan: 🎜🎜rrreee🎜Kemudian lawati http://localhost:8080, anda akan melihat halaman dengan kotak carian dan kotak pilihan lungsur turun. Apabila anda memasukkan kata kunci carian atau memilih syarat penapis, data dalam senarai akan dicari dan ditapis berdasarkan input. 🎜🎜Kesimpulan:🎜Dengan Vue dan Element-Plus, kami boleh melaksanakan fungsi carian dan penapisan dengan mudah. Kami menggunakan pengikatan data Vue dan kotak input Element-Plus dan komponen kotak pilihan lungsur turun untuk menggunakan kata kunci carian dan syarat penapis pada data melalui penghantaran peristiwa dan data, sekali gus merealisasikan fungsi carian dan penapisan. Di atas adalah contoh mudah, anda boleh mengembangkan dan menyesuaikannya mengikut keperluan anda sendiri. 🎜

Atas ialah kandungan terperinci Cara melaksanakan fungsi carian dan penapisan melalui vue dan Element-plus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!