element 前端分页,element ui table前端分页
主要介绍一个使用ElementUI编写前端分页查询的例子，通过示例代码详细介绍，有一定的参考价值。感兴趣的朋友可以参考一下。
目录
前言首页查询写在最后。
前言
一般我们在做项目的时候，都会调用后台接口进行增删改，但也有例外。在一些特定的场景下，会要求前端进行增删改。所以让我们今天就开始吧。使用的框架是Vue，UI框架是使用率很高的ElementUI。所以让我们开始吧。
前端分页
假设我们的数据保存在表中，方法是单击一个add按钮，弹出一个add弹出窗口，输入数据，然后单击OK按钮。原来如此。
{
data () {
返回{
页面：{
PageOffset: 1，//分页页码，默认为第一页。
Page: 20，//一个页面的页数，默认为20
},
AllData: []，//表中所有数据的数据源
TableData: [] //表数据源
}
},
方法：{
//添加按钮。经过一系列操作后，单击确定保存数据并调用方法。
saveData(数据){
如果(！数据)返回
this.allData.push(数据)
this.paging()
},
//点击第一页和第二页的监控方式。
页面更改(页面偏移){
this . page . page offset=page offset
this.paging()
},
//分页方法
分页(){
const page offset=this.page.pageoffset//Page数
const page count=this.page.pagecount//How一页显示多少数据？
this . tabledata=this . all data . slice((page offset-1)* page count，pageOffset * pageCount)
}
}
}
具体代码差不多是这样的。其实很简单，只是有时候，可能没有想法。下面总结一下前端分页的几点：
需要两个变量，一个是存储总数据，一个是存储我们页面要显示的分页数据，然后根据页码和一个页面显示的页数，用切片方法得到。
查询
如果需要添加一个查询条件来过滤前端分页内容下的数据，并且需要根据多个条件进行过滤，那么应该怎么做呢？我们可以写一个这样的方法：
//查询数据
//val:输入查询的值。
//data:查询的数据源。
//fuzzySearch:是模糊查询吗？
函数搜索(键，值，数据，模糊搜索=假){
const searchTxt=val.trim()
if (searchTxt===) {
返回数据
}
//如果用空格隔开，表示可以多值过滤。
if(search txt ~ search txt . index of(“”){
设search txtarr=searchTextToArr(search txt)
返回数据。filter((o)={
return ~ search txtarr . index of(o[key])
})
}否则{
//单值过滤
返回数据。filter((o)={
//是模糊查询吗？
返回模糊搜索？~o[key]。index of(search txt):search txt===o[key]
})
}
}
//将多选查询条件转化为数组
函数searchTextToArr (str) {
let text=str.trim()
//过滤掉多余的空格，比如‘雌雄’中间多输入一个空格的情况。
返回text.split( )。过滤器((o)={
return o===0 o
})
}
//数据
常量数据=[
{姓名：詹姆斯，性别：男性 }，
{姓名：南希，性别：女性 }，
{姓名：鲍勃，性别：男性 }，
{姓名：艾伦，性别：男性 }，
{姓名：杰克，性别：男性 }，
{姓名：茉莉，性别：女 }，
]
//测试
搜索(姓名，杰克茉莉，数据)//[{ 姓名:杰克，性别:男性 }，{ 姓名:茉莉，性别:女性 }]
Search(姓名，艾伦，数据)//[{ 姓名:艾伦，性别:男性 }]
搜索(姓名， j ，数据，true)//[{ 姓名:詹姆斯，性别:男性 }，{ 姓名:杰克，性别:男性 }，{ 姓名:茉莉
上面的代码实现了模糊查询、多值查询和单值精确查询。它主要使用indexOf和filter进行筛选和判断。此外，还使得一些用户的误操作兼容，让用户在不完全满足输入条件的情况下也能找到想要的数据。增强用户体验。如果代码写好了，注释写在里面，很好理解。如果有不明白的地方，请留言告诉我。
写在最后
今天主要分享一下如果用ElementUI写一个前端分页，然后搜索，如何实现模糊查询，精确查询，多值查询的功能。内容比较简单。但是比较实用。
关于使用ElementUI编写前端分页查询示例的文章到此结束。更多相关元素分页查询内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。