使用ElementUI写一个前端分页查询的实例
目录
前言
前端分页
查询
写在最后
前言一般我们在做项目的时候，都是通过调用后台接口去做增删改查，但是也有例外，有些某些特定场景下，会让前端去做好增删改查. 那么我们今天就来做一下这个需求. 使用的框架是Vue,UI框架是使用率很高的ElementUI. 那么我们开干吧。
前端分页假定我们的数据是通过点击一个添加按钮，弹出一个添加弹窗，输入好数据后，点击确定按钮，把数据保存到表格中去. 那么就是这样的
{
data () {
return {
page: {
pageOffset: 1, // 分页页码, 默认第一页
pageCount: 20, // 一页的页数, 默认20
},
allData: [], // 表格所有数据的数据源
tableData: [] // 表格数据源
}
},
methods: {
// 添加按钮，弹窗一系列操作后，点击确定保存数据，调用的方法
saveData (data) {
if (!data) return
this.allData.push(data)
this.paging()
},
// 点击第一页，第二页的监听方法
pageChange (pageOffset) {
this.page.pageOffset = pageOffset
this.paging()
},
// 分页方法
paging () {
const pageOffset = this.page.pageOffset // 页码
const pageCount = this.page.pageCount // 一页显示多少个数据
this.tableData = this.allData.slice((pageOffset - 1) * pageCount, pageOffset * pageCount)
}
}
}
具体代码差不多就是这样啦，其实是很简单，但是有的时候，可能也会没有思路。下面来总结一下前端分页的几个点:
需要两个变量，一个存储的是总的数据，一个存储的是我们页面需要展示的分页数据
然后就是根据页码和一页展示的页数通过slice方法去得到
假如在前端分页的内容下，需求再让加上一个查询条件，去过滤数据，并且需要根据多条件过滤，那么怎么办呢？ 我们可以写一个这样的方法:
// 查询数据
// val: 输入框查询的值
// data: 查询的数据源
// 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]
})
}
}
// 把多选查询条件变成数组
function searchTextToArr (str) {
let text = str.trim()
// 过滤掉多余的空格, 比如 '男 女' 中间多输入了一个空格的情况.
return text.split(' ').filter((o) => {
return o === '0' || o
})
}
// 数据
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":"女"}]
以上代码实现了模糊查询、多值查询、单值精确查询。 主要就是利用indexOf、filter去做过滤和判断. 另外还去做了一些用户的误操作的时候的兼容，让用户在不完全符合输入条件的时候，也能找到想要的数据。增强用户体验. 代码的话，里边写了注释，很容易懂。 如果有不懂的地方的话，可以留言跟我说一下，大家交流一下.
今天主要分享用ElementUI写一个前端分页，然后搜索的话，怎么实现模糊查询、精确查询以及多值查询的功能。 内容比较朴素啦。 但是还是比较偏实用的。
到此这篇关于使用ElementUI写一个前端分页查询的实例的文章就介绍到这了,更多相关Element 分页查询内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
