How to implement search and filtering functions through vue and Element-plus

How to implement search and filtering functions through Vue and Element-Plus

Introduction:
In modern web applications, search and filtering functions are a very important part, which can help users quickly find what they want. Need information. Vue is a popular JavaScript framework, and Element-Plus is a UI component library for Vue. Their combination can easily implement search and filtering functions. This article will introduce how to use Vue and Element-Plus to implement these functions, and provide relevant code examples.

1. Preparation
   First, we need to install Vue and Element-Plus. You can install them with the following command:

npm install vue
npm install element-plus

2. Create Vue Application
   Next, we need to create a Vue application. We can use Vue's scaffolding tools to create a basic Vue application. Run the following command in the command line:

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

Then, select the configuration options according to the prompts, or directly use the default configuration to generate the Vue application.

3. Import Element-Plus components
   In the created Vue application, we need to import the related components of Element-Plus. Open the src/main.js file and add the following code:

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

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

Here we use the ES6 module import syntax and import the createApp function and Requires the use of Element-Plus components. Then we created a Vue application using the createApp function and used Element-Plus in the application.

4. Create search and filter components
   We can create two Vue components to implement search and filter functions. Create two files SearchBar.vue and FilterBar.vue in the src/components directory. Add the following code in the SearchBar.vue file:

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

Add the following code in the FilterBar.vue file:

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

here , we created two components respectively, and used the Element-Plus input box and drop-down selection box components in the components. Note that in the SearchBar component we use the v-model directive to implement two-way data binding, and monitor searchKeyword## in the watch option # changes and passes the value to the parent component through the $emit method.

Using search and filter components
5. In the App component, we can use the search and filter components created previously. Open the
   src/App.vue file and add the following code:

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

Here, we imported the SearchBar and FilterBar components in the App component and passed

< SearchBar @search="handleSearch">andBind events to methods of App components . A data array is defined in data, and filtered according to the search keywords and filter conditions to obtain the filteredData array. Then use the v-for directive to render each element in the filteredData array as a list item.

Run the code
6. Finally, we can run the following command in the command line to start the application:
   

npm run serve

Then access

http in the browser ://localhost:8080, you will see a page with a search box and a drop-down selection box. When you enter search keywords or select filter conditions, the data in the list will be searched and filtered based on the input.

Conclusion:

With Vue and Element-Plus, we can easily implement search and filtering functions. We used Vue's data binding and Element-Plus's input box and drop-down selection box components to apply search keywords and filter conditions to the data through the transmission of events and data, thus realizing the search and filtering functions. The above is a simple example, you can further develop and customize it according to your own needs.


The above is the detailed content of How to implement search and filtering functions through vue and Element-plus. For more information, please follow other related articles on the PHP Chinese website!