How to use Vue and Element-UI for data filtering and filtering

How to use Vue and Element-UI for data screening and filtering

Introduction:
With the rapid development of the Internet, data processing and filtering have become an important part of many applications. As a popular JavaScript framework, Vue.js provides powerful data binding and responsive features, making data processing and filtering easier. Element-UI is a feature-rich UI component library that provides rich table and filtering functions and can be used well in combination with Vue.js. This article will introduce how to use Vue and Element-UI for data filtering and filtering, and give corresponding code examples.

Implementation process:

1. Installation of Vue and Element-UI:
   First, use npm or yarn to install Vue and Element-UI. Run the following command in the project root directory:

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

2. Introduce Vue and Element-UI:
   In the page that needs to be used, introduce Vue and Element-UI through the import statement Components and styles.

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

3. Define data and filter conditions:
   Define the data and filter conditions that need to be filtered in the Vue instance. For example, define an array named "items" and a filter condition named "filter":

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

4. Use the Input component of Element-UI to bind the filter condition:
   Use the Input component of Element-UI to bind filter conditions, and bind the filter conditions to the "filter" property of the Vue instance.

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

5. Use calculated properties for data filtering:
   Use calculated properties to filter data based on filter conditions.

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

6. Display the filtered data in the table:
   Use the Table component of Element-UI to display the filtered data in the table.

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

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

Summary:
This article introduces how to use Vue and Element-UI for data filtering and filtering, and gives Related code examples. By using the responsive features provided by Vue and the rich components provided by Element-UI, we can easily implement data filtering and filtering functions. I hope this article will be helpful to developers who use Vue and Element-UI for data filtering and filtering.

The above is the detailed content of How to use Vue and Element-UI for data filtering and filtering. For more information, please follow other related articles on the PHP Chinese website!