vue elementui分页,vue分页组件page
ElementUI也是一个非常好的组件库，对于表格、表单、时间日期选择器等常用组件都有很好的封装和接口。本文主要介绍Vue2.0 ElementUI PageHelper实现的表格分页。有需要的朋友可以参考一下。
前言
最近做了一些前端项目，想把表格分页显示。表的分页方式有很多种，可以分为物理分页和逻辑分页。因为逻辑分页(也就是前端分页)是缓存所有数据，然后分页面显示，所以在数据量大的时候会影响浏览器的速度。所以经过考虑，我用了后端分页，后端分页的特点是请求当前页面的数据，每次页码或者每页的数据量发生变化的时候重新发送请求。这里使用的技术主要有以下几种：
春天
学习笔记一
框架
VueJS 2.0
ElementUI
后端数据库使用Mysql。事实上，也可以使用其他数据库，因为PageHelper插件兼容每个数据库。PageHelper的本质是插入一个拦截器，拦截器在mybatis的sql语句执行之前进行分页处理。本质上，它增加了两个极限参数。PageHelper的配置和使用方法请参考《Spring Mybatis对PageHelper插件分页》一文，此处不再赘述。
前端用的是最近很流行的vuejs框架2.0。它是一个mvvm框架，类似于AngularJS，但更轻便。UI使用饿了么团队推出的elementUI框架，这是一个基于vuejs的框架，与我们的前端框架完美结合，封装了很多组件，开发起来很方便。
下面是这个Demo的截图，实现了基本的增删查功能。表格排序是elementUI的表格控件中的一个属性，很容易设置。
正文
以下是节目截图。右键单击在新选项卡中打开图片，以便清楚地查看。
我们来看看前端代码。首先，导入文件：
link rel= style sheet href=/core/element-ui/lib/theme-default/index . CSS rel= external no follow
脚本src=。/js/jquery-3 . 1 . 1 . min . js /脚本
脚本src=。/js/JSON 2 . js /脚本
脚本src=。/js/vue.min.js/script
脚本src=。/js/vue-resource . js /脚本
脚本src=。/element-ui/lib/index . js /script
第一行和最后一行是ElementUI的导入包，可以从ElementUI官网下载到源文件导入，也可以直接通过CDN导入：
！-介绍风格-
link rel= style sheet href= https://un pkg . com/element-ui/lib/theme-default/index . CSS rel= external no follow
！-介绍组件库-
script src= https://UNP kg . com/element-ui/lib/index . js /script
倒数第二行vue-resource是vuejs的ajax插件，可以通过XMLHttpRequest或JSONP发起请求和处理响应。简单地说，它可以用来发送ajax请求。
接下来是款式风格。
风格。el-select。El-输入{
宽度：110px
}。el表。信息行{
背景：# c9e5f5
}
#top {
背景：# 20A0FF
填充：5px
溢出：隐藏
}
/风格
HTML正文
div id=test
div id=top
span style= float:right；
El-button type= text @ click= add style= color:white add/El-button
El-button type= text @ click= delete names style= color:white 批量删除/el-button
/span
/div
br/
div style=margin-top:15px
El-input placeholder=请输入内容 v-model= criteria style= padding-bottom:10px；
El-select v-model= select slot= prepend placeholder=请选择
el选项标签=id 值=1/el选项
el选项标签=名称值=2/el选项
现在对上面的代码做一个简单的解释。tableData是显示在表格当前页面上的数据数组。加载网页时，首先执行loadData方法。criteria是当前的搜索条件，默认为空。第二个参数是当前页码，默认情况下是第一页。第三个参数是偏移量，即要查询的数字，即当前页面包含的数据量。当页码或每页的数据量发生变化时，将使用这些参数的新值作为参数再次调用该方法。我们可以看一下控制器的代码：
@ResponseBody
@ request mapping(value=/querystudentbypage ，method=RequestMethod。获取)
public MapString，Object querystudentbypage(@ request param(value= parameter )字符串参数，
@ request param(value= pageNum )int pageNum，@ request param(value= pageSize )int pageSize
{
page student page=inewstudentservice . select students(parameter，pageNum，pageSize)；
MapString，Object map=new HashMapString，Object()；
map . put( pagestudendata ，page)；
map.put(number ，page . gettotal())；
返回地图；
}
ce的实现代码：
public page student select students(String参数，int pageNum，int pageSize)
{
page student page=page helper . start page(pageNum，pageSize)；
newstudentmapper . select students(参数)；
返回页面；
}
米巴蒂斯法典
select id= select students result map= NewStudentResultMap
select id，name from student where id=#{parameter}或name like CONCAT(% ，# { parameter }， % )
/选择
注意：为了简化代码，这里模糊了用户的输入。如果数据表中的id字段等于用户的输入或者name字段包含用户的输入，则可以查询。
从上面的服务实现类和mabatis代码可以看出，我们并没有手动去给sql语句加limit，而是在newstudentMapper.selectStudents(parameter);这句代码之前加入了Page page = PageHelper.startPage(pageNum, pageSize);这句代码就是对PageHelper的调用，不需要去管PageHelper如何去实现（实际是通过Interceptor），只需要这一句代码就可以做出物理分页。它会对紧跟在它后面的一个sql查询起作用，并且返回分页后的当页代码。
在控制器的Map中，我们可以看到put有两个值，一个是返回的列表，另一个是数据总量。前端表格控件将使用这个列表，而分页控件将使用这个数据总量。注意startPage的参数，第一个是想要请求的页码，第二个是请求页的数据量。这两个要与前端请求时发送的参数相对应。
程序的其他基本功能包括添加、修改、删除、批量删除等。前端代码已经解释过了，后端代码简单调整到数据库，这里就不粘贴后端代码了。
注意：
表格点击高亮功能可以通过在ElementUI的表格控件中添加highlight-current-row属性来设置，但是高亮颜色封装在css文件中。我在这里没有使用这个属性。相反，我自定义了一个类样式，并在单击一行时将自定义样式分配给当前行。如果你对ElementUI本身的高亮颜色不满意，又不想改变css文件，可以用这种方式自定义一个行点击响应。
写在最后的话
vuejs作为前端控件，近年来越来越受欢迎，其社区非常活跃。同时有大量开源项目库支持。详细列表请参考Vue开源项目库。如果vuejs与开源库整合，将会大大提高前端开发的效率，尤其是像我这样对前端不熟悉的后端工程师，也可以通过对比来自官网的教程和实例来开发前端。如果用ES6，模块化会更容易。
ElementUI也是一个非常好的组件库，对于表格、表单、时间日期选择器等常用组件都有很好的封装和接口。
PageHelper作为一款中文编写的mybatis分页插件，性能还算不错，支持目前所有主流数据库，使用起来也很方便。
前端开发需要学习的东西并不比后端开发少多少，需要经验的积累。这里记录一下学习前端开发的历程。
关于Vue2.0 ElementUI PageHelper实现的表分页功能的这篇文章到此为止。关于Vue2.0 ElementUI PageHelper的表分页的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。