How to use vue and Element-plus to achieve the linkage effect of paging and search

How to use Vue and Element-plus to achieve the linkage effect of paging and search

In modern web development, it is a very common requirement to achieve the linkage effect of paging and search. Vue and Element-plus are two frameworks and libraries widely used in front-end development. They provide a wealth of components and tools that can easily help us achieve this function. This article will use an example to demonstrate how to use Vue and Element-plus to achieve the linkage effect of paging and search.

First, we need to prepare a simple data list, such as an array containing multiple objects. To simulate a real scenario, we assume that each object has a name attribute and we will search by name. At the same time, we also need to consider the paging function, that is, each page displays a certain amount of data, and users can view more data by turning the pages.

In the HTML part, we will use the components provided by Element-plus to implement paging and search functions. First, we need an input box and a button for searching. The input box is bound to a variable searchText, and a search function is triggered when the button is clicked. Secondly, we also need a paging component, including page numbers and page turning buttons. We will bind the current page number to a variable currentPage, and trigger a function to jump to the page when the page turn button is clicked.

<template>
  <div>
    <input v-model="searchText" placeholder="请输入搜索内容" />
    <el-button type="primary" @click="search">搜索</el-button>
    <div v-for="item in displayedItems" :key="item.id">{{ item.name }}</div>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

Next, we define the relevant logic and data in the JavaScript part. First, we define the data array items in the data property of the Vue instance. Then, we define a calculated property displayedItems, which will return the corresponding data based on the current page number and search content. At the same time, we also need to maintain a total variable to represent the total amount of data, which is used to calculate paging logic.

<script>
import { reactive } from 'vue'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        // ...
      ],
      searchText: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  computed: {
    displayedItems() {
      return this.items.filter(item => item.name.includes(this.searchText))
        .slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    search() {
      // 根据搜索内容重新计算分页和数据
      this.currentPage = 1
    },
    handlePageChange(currentPage) {
      // 更新当前页码
      this.currentPage = currentPage
    }
  }
}
</script>

In order for the code to run normally, we also need to import and register Element-plus components in this file. In Vue 3, you can use import { ElButton, ElInput, ElPagination } from 'element-plus' to import related components, and then register them in the components property. If you use the Vue 2 version, the import and registration methods are slightly different, please adjust according to your specific situation.

Finally, create a Vue application in the entry file and mount it on the page.

At this point, we have completed the linkage effect of paging and search using Vue and Element-plus. Users can search for data that meets the conditions through the input box and browse more data through the paging component. This example is just a simple demonstration, you can extend and optimize the function according to actual needs.

Summary: Using the components and tools provided by Vue and Element-plus, we can easily achieve the linkage effect of paging and search. By binding data and events, combined with computed properties and methods, we can easily handle user input and page jumps, and implement data interaction between different components. Hopefully the examples in this article will help you better understand and apply these techniques. If you want to learn more about the functions and usage of Vue and Element-plus, please refer to the official documentation and related tutorials.

The above is the detailed content of How to use vue and Element-plus to achieve the linkage effect of paging and search. For more information, please follow other related articles on the PHP Chinese website!