快捷導(dǎo)航

使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例

更新時(shí)間：2022年02月18日 09:52:57 作者：強(qiáng)風(fēng)吹拂丶

本文主要介紹了使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

一般我們在做項(xiàng)目的時(shí)候，都是通過調(diào)用后臺接口去做增刪改查，但是也有例外，有些某些特定場景下，會(huì)讓前端去做好增刪改查. 那么我們今天就來做一下這個(gè)需求. 使用的框架是Vue,UI框架是使用率很高的ElementUI. 那么我們開干吧。

前端分頁

假定我們的數(shù)據(jù)是通過點(diǎn)擊一個(gè)添加按鈕，彈出一個(gè)添加彈窗，輸入好數(shù)據(jù)后，點(diǎn)擊確定按鈕，把數(shù)據(jù)保存到表格中去. 那么就是這樣的

{
    data () {
        return {
            page: {
                pageOffset: 1, // 分頁頁碼, 默認(rèn)第一頁
                pageCount: 20, // 一頁的頁數(shù), 默認(rèn)20
            },
            allData: [], // 表格所有數(shù)據(jù)的數(shù)據(jù)源
            tableData: [] // 表格數(shù)據(jù)源
        }
    },
    methods: {
        // 添加按鈕，彈窗一系列操作后，點(diǎn)擊確定保存數(shù)據(jù)，調(diào)用的方法
        saveData (data) {
            if (!data) return
            this.allData.push(data)
            this.paging()
        },
        // 點(diǎn)擊第一頁，第二頁的監(jiān)聽方法
        pageChange (pageOffset) {
          this.page.pageOffset = pageOffset
          this.paging()
        },
        // 分頁方法
        paging () {
            const pageOffset = this.page.pageOffset // 頁碼
            const pageCount = this.page.pageCount // 一頁顯示多少個(gè)數(shù)據(jù)
            this.tableData = this.allData.slice((pageOffset - 1) * pageCount, pageOffset * pageCount)
        }
    }
}

具體代碼差不多就是這樣啦，其實(shí)是很簡單，但是有的時(shí)候，可能也會(huì)沒有思路。下面來總結(jié)一下前端分頁的幾個(gè)點(diǎn):

需要兩個(gè)變量，一個(gè)存儲(chǔ)的是總的數(shù)據(jù)，一個(gè)存儲(chǔ)的是我們頁面需要展示的分頁數(shù)據(jù)
然后就是根據(jù)頁碼和一頁展示的頁數(shù)通過slice方法去得到

查詢

假如在前端分頁的內(nèi)容下，需求再讓加上一個(gè)查詢條件，去過濾數(shù)據(jù)，并且需要根據(jù)多條件過濾，那么怎么辦呢？我們可以寫一個(gè)這樣的方法:

// 查詢數(shù)據(jù)
// val:  輸入框查詢的值
// data: 查詢的數(shù)據(jù)源
// fuzzySearch: 是否是模糊查詢
function search (key, val, data, fuzzySearch = false) {
      const searchTxt = val.trim()
      if (searchTxt === '') {
        return data
      }
      // 如果以空格隔開的話，則表示可以多值過濾
      if (searchTxt && ~searchTxt.indexOf(' ')) {
        let searchTxtArr = searchTextToArr(searchTxt)
        return data.filter((o) => {
          return ~searchTxtArr.indexOf(o[key])
        })
      } else {
        // 單值過濾
        return data.filter((o) => {
          // 是否是模糊查詢
          return fuzzySearch ? ~o[key].indexOf(searchTxt) : searchTxt === o[key]
        })
      }
}
// 把多選查詢條件變成數(shù)組
function searchTextToArr (str) {
    let text = str.trim()
    // 過濾掉多余的空格, 比如 '男  女' 中間多輸入了一個(gè)空格的情況.
    return text.split(' ').filter((o) => {
        return o === '0' || o
    })
}
// 數(shù)據(jù)
const data = [
    {name: 'james', sex: '男'},
    {name: 'nancy', sex: '女'},
    {name: 'bob', sex: '男'},
    {name: 'allen', sex: '男'},
    {name: 'jack', sex: '男'},
    {name: 'jasmine', sex: '女'},
]
// 測試
search('name', 'jack   jasmine', data) // [{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]
search('name', ' allen ', data) // [{"name":"allen","sex":"男"}]
search('name', 'j', data, true) // [{"name":"james","sex":"男"},{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]

以上代碼實(shí)現(xiàn)了模糊查詢、多值查詢、單值精確查詢。主要就是利用indexOf、filter去做過濾和判斷. 另外還去做了一些用戶的誤操作的時(shí)候的兼容，讓用戶在不完全符合輸入條件的時(shí)候，也能找到想要的數(shù)據(jù)。增強(qiáng)用戶體驗(yàn). 代碼的話，里邊寫了注釋，很容易懂。如果有不懂的地方的話，可以留言跟我說一下，大家交流一下.