Write an instance of a front-end pagination query using ElementUI

Preface

Generally, when we are working on projects, we use the background interface to add, delete, modify and check, but there are exceptions. In some specific scenarios, the front-end will be allowed to do the addition, delete, modify and check. So let’s do this requirement today. The framework used is Vue, and the UI framework is the ElementUI with a very high usage rate. So let’s start.

Front-end pagination

Suppose our data is clicked on an Add button and an Add pop-up window pops up. After entering the data, click the OK button to save the data to the table. Then that's it.

{
    data () {
        return {
            page: {
                pageOffset: 1, // Pagination page number, default first page                pageCount: 20, // The number of pages per page, default 20            },
            allData: [], // Data source for all data in the table            tableData: [] // Table data source        }
    },
    methods: {
        // Add a button, pop up a series of operations, click OK to save the data, and call the method        saveData (data) {
            if (!data) return
            (data)
            ()
        },
        // Click on the monitoring method of the first page and the second page        pageChange (pageOffset) {
           = pageOffset
          ()
        },
        // Pagination method        paging () {
            const pageOffset =  // Page number            const pageCount =  // How many data is displayed on a page             = ((pageOffset - 1) * pageCount, pageOffset * pageCount)
        }
    }
}

The specific code is almost like this. It is actually very simple, but sometimes, you may not have any ideas. Let’s summarize the points of front-end pagination:

Two variables are needed, one stores the total data, and the other stores the paginated data that our page needs to display.
Then, according to the page number and the number of pages displayed on a pagesliceMethod to get

Query

If you need to add a query condition to filter data under the content of front-end pagination, and filter according to multiple conditions, what should you do? We can write a method like this:

// Query data// val: The value of the input box query// data: the query data source// fuzzySearch: Is it a fuzzy query?function search (key, val, data, fuzzySearch = false) {
      const searchTxt = ()
      if (searchTxt === '') {
        return data
      }
      // If separated by spaces, it means that multiple values can be filtered      if (searchTxt &amp;&amp; ~(' ')) {
        let searchTxtArr = searchTextToArr(searchTxt)
        return ((o) =&gt; {
          return ~(o[key])
        })
      } else {
        // Single value filtering        return ((o) =&gt; {
          // Is it a fuzzy query          return fuzzySearch ? ~o[key].indexOf(searchTxt) : searchTxt === o[key]
        })
      }
}
// Turn multiple-select query conditions into arraysfunction searchTextToArr (str) {
    let text = ()
    // Filter out excess spaces, such as if 'male and female' are entered in the middle.    return (' ').filter((o) =&gt; {
        return o === '0' || o
    })
}
// dataconst data = [
    {name: 'james', sex: 'male'},
    {name: 'nancy', sex: 'female'},
    {name: 'bob', sex: 'male'},
    {name: 'allen', sex: 'male'},
    {name: 'jack', sex: 'male'},
    {name: 'jasmine', sex: 'female'},
]
// testsearch('name', 'jack   jasmine', data) // [{"name":"jack","sex":"male"},{"name":"jasmine","sex":"female"}]search('name', ' allen ', data) // [{"name":"allen","sex":"male"}]search('name', 'j', data, true) // [{"name":"james","sex":"male"},{"name":"jack","sex":"male"},{"name":"jasmine","sex":"female"}]

The above code implements fuzzy query, multi-value query, and single-value accurate query. Mainly useindexOf、filterDo filtering and judgment. In addition, some user error operations are also used to make compatibility, so that users can find the desired data when they do not fully meet the input conditions. Enhance the user experience. For the code, comments are written in it, which is easy to understand. If you don’t understand something, you can leave a message to tell me and let me communicate.

Written at the end

Today, I mainly share how to implement fuzzy query, precise query and multi-value query functions by writing a front-end pagination using ElementUI and then searching. The content is relatively simple. But it is still relatively practical.

This is the end of this article about writing an example of front-end pagination query using ElementUI. For more related Element pagination query content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!