原理就是利用Layui的分页组件和Vue组件的模板渲染功能。
我下面直接贴代码，比较直观。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/international/Content/plugins/layui-v2.2.45/css/layui.css" media="all" /> </head> <body> <!--列表--> <div id="vueContainer"> <table class="layui-table" lay-filter="test"> <thead> <tr> <th width="10%">ID</th> <th width="50%">语言名称</th> <th width="40%">语言备注</th> </tr> </thead> <tbody> <tr v-for="item in translateLanguages"> <td>{{item.Id}}</td> <td>{{item.LangName}}</td> <td>{{item.LangComment}}</td> </tr> </tbody> </table> </div> <!--分页容器--> <div id="pagination"></div> <script src="/international/Content/js/jquery-2.1.1.min.js"></script> <script src="/international/Content/plugins/layui-v2.2.45/layui.js"></script> <script src="/international/Content/js/vue.js"></script> <script src="/international/Content/js/translate/translateLanguage/list.js"></script> </body> </html>
list.js
//使用Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据 var vue = new Vue({ el: "#vueContainer", data: { translateLanguages: null } }); //使用layui分页 layui.use('laypage', function () { var laypage = layui.laypage; laypage.render({ elem: 'pagination' , count: totalCount , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] , jump: function (obj, first) { //点击非第一页页码时的处理逻辑。比如这里调用了ajax方法，异步获取分页数据 if (!first) { pagination(obj.curr, obj.limit);//第二个参数不能用变量pageSize，因为当切换每页大小的时候会出问题 } } }); }); var pageIndex = 1; var pageSize = 10; var totalCount = 0; pagination(pageIndex, pageSize); function pagination(pageIndex, pageSize) { //查询条件 var param = { pageIndex: pageIndex, pageSize: pageSize, //其它查询条件可在下面添加 }; $.ajax({ type: 'POST', url: '/international/translatelanguage/getlist', dataType: 'json', data: param, async: false,//这里设置为同步执行，目的是等数据加载完再调用layui分页组件，不然分页组件拿不到totalCount的值 success: function (data) { vue.translateLanguages = data.data; totalCount = data.count; } }); };