How to use Vue and Element-UI to navigate and filter data

How to use Vue and Element-UI to implement data navigation and filtering

Navigation and filtering are one of the common functions in web applications. They can make it easier for users to quickly find the information they need. With the powerful support of Vue and Element-UI, we can easily implement these two functions.

This article will introduce how to use Vue and Element-UI to implement data navigation and filtering. We will take a simple student management system as an example to demonstrate how to display a list of students in the interface and operate it through navigation and filtering.

First, we need to prepare some student data. In the Vue instance, we can define an array called students that contains information about each student. Each student's information can include attributes such as ID, name, age, etc.

Next, we need to display the student list on the interface. We can use the Table component provided by Element-UI to achieve this. In the template of the Vue instance, we can use the el-table tag to create a table and define each column of the table by using the el-table-column tag. We can use the students array as the data source of the table, and display each student's id, name, and age in different columns of the table.

On the basis of displaying the student list, we can add navigation function. Vue and Element-UI provide paginator components to help us implement navigation functions. We can use the el-pagination tag in the template to create a paginator, specify the total number of data items by setting the total attribute, and specify how many pieces of data are displayed on each page by setting the page-size attribute. We can also get the page number that the user clicked on the paginator by listening to the current-change event, and then update the displayed data by recalculating the starting index and ending index of the student list in the Vue instance.

Based on the navigation function, we can further add filtering functions. Vue and Element-UI provide a variety of input components to help us implement filtering functions. We can use the el-input tag in the template to create an input box, and bind the value of the input box to a property of the Vue instance through the v-model directive. Then, we can use the computed attribute in the Vue instance to filter out the list of students that meet the conditions and update it into the displayed table as a data source.

The following is a complete sample code:

<template>
  <div>
    <el-input v-model="searchValue" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="filteredStudents" style="width: 100%">
      <el-table-column prop="id" label="学生ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :total="students.length"
      :page-size="pageSize"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
        // 更多学生数据...
      ],
      currentPage: 1,
      pageSize: 10,
      searchValue: ''
    };
  },
  computed: {
    filteredStudents() {
      let filtered = this.students;
      if (this.searchValue) {
        filtered = filtered.filter(student =>
          student.name.includes(this.searchValue)
        );
      }
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filtered.slice(startIndex, endIndex);
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

In the above sample code, we define a property named searchValue to save the search keywords entered by the user, through the computed property filteredStudents Filter out the list of students that meet the conditions based on searchValue and currentPage and display them in the table.

Through this example, we can see that it is very simple to use Vue and Element-UI to navigate and filter data. With just a few lines of code, you can provide users with a good interactive experience and help them quickly find the information they need. Hope this article can be helpful to you!

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