How to filter and sort data using Vue and Element-UI

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

Vue.js is a very popular JavaScript framework, and Element-UI is a component library based on Vue, which provides a rich UI components can be used to simplify our development work. In many actual projects, we usually need to filter and sort data, so how to use Vue and Element-UI to complete these requirements? In this article, we will learn how to use Vue and Element-UI to filter and sort data.

First, we need to introduce Element-UI into the Vue project. If you are not already using Vue and Element-UI, you can install them via npm.

npm install vue
npm install element-ui

After the installation is complete, we need to introduce the Element-UI style and Vue.use() in the main.js file.

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

Next, we can create a component called DataFilterSort, in which we show how to use Vue and Element-UI to filter and sort data.

<template>
  <div>
    <el-row>
      <el-input v-model="keyword" placeholder="请输入关键字" class="inputItem"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-row>
    <el-table :data="filteredData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '', // 筛选关键字
      data: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' }
      ]
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.name.indexOf(this.keyword) !== -1;
      });
    }
  },
  methods: {
    search() {
      // 筛选功能
    }
  }
};
</script>

<style scoped>
.inputItem {
  width: 200px;
  margin-right: 10px;
}
</style>

In this example, we introduced a component called DataFilterSort. First, we added an input box and a search button to the template for entering filter keywords and triggering the search function. Next, we use Element-UI's el-table component to display data, and specify the data fields and label names to be displayed in el-table-column. In addition, we also enable the sortable function of the age field by setting the sortable attribute of el-table-column.

In data, we declare a data attribute named keyword to save the value of the input box. In computed, we define a computed property named filteredData, which uses the filter method of the array to filter the data. The filter condition is whether the name field contains the value of keyword. In methods, we define a method called search to implement the data filtering function.

When the keyword changes, the calculated attribute filteredData will be recalculated to implement the data filtering function. When you click the search button, the search method will be triggered to filter the data.

Try to use this component in a Vue project. We will find that after entering keywords, the data will be filtered according to the filter conditions and displayed on the page in real time. By clicking on the age column in the table header, the data will be sorted according to age.

Through the examples in this article, I believe you have mastered how to use Vue and Element-UI to filter and sort data. These functions can help us operate data more conveniently and improve development efficiency. I wish you better results in the development of Vue and Element-UI!

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