vue+element-ui 实现分页（demo）

效果图：

代码：
后端用的是tp5的框架
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
<div id = "app" class="wrapper wrapper-content animated fadeInRight" ><div class="row"><div class="col-lg-12"><div class="ibox"><div class="ibox-content"><div class="row m-l-none"><div style="height: 60px"><div class="form-group "><div class="col-sm-3"><el-input v-model="title" placeholder="公众号名称"></el-input></div><div class="col-sm-2"><el-button type="primary" @click="search()">查询</el-button></div></div></div><table class="table table-bordered table-hover table-striped" style="margin-top: 50px;"><thead><tr><th>编号</th><th>公众号</th><th>日期</th><th>新增用户</th><th>取关用户</th><th>净增长用户</th><th>总用户</th><th>操作</th></tr></thead><tbody><tr v-for="fdata in fans_data"><td>{{ fdata.id }}</td><td style="width: 250px;line-height: 30px;"><el-row><el-col :span="8"><img :src="fdata.headimg" style="width: 60px;height: 60px;border-radius: 30px;"></el-col><el-col :span="12"><strong>{{ fdata.name }}</strong><br>{{ fdata.appId }}</el-col></el-row></td><td>{{ fdata.day }}</td><td>{{ fdata.new_user }}</td><td>{{ fdata.cancel_user }}</td><td>{{ fdata.new_user-fdata.cancel_user }}</td><td>{{ fdata.cumulate_user }}</td><td><a @click="sevendays(fdata.id)">近七天</a></td></tr><tr v-if="fans_data.length == 0"><td colspan="12"><h3 class="text-center">暂无数据</h3></td></tr></tbody></table></div></div></div></div><div class="block" style="float: left;"><el-paginationbackground@current-change="handleCurrentChange"layout="prev, pager, next":page-count="page_count"></el-pagination></div></div></div><script>new Vue({el: '#app',data: {message: 'Hello Vue.js!',fans_data:[],page: 1,page_count: 0,title:'',seven_days:[]},methods:{getdata:function () {var that = this;$.ajax({url:'/tp5/public/index.php/Index/Index/lists',type:'post',data:{page:that.page,title:that.title},success:(response)=>{// console.log(response);that.fans_data = response.data;that.page = response.page;that.page_count = response.page_count;}});},search: function () {this.getdata()},handleCurrentChange(val) {this.page = val;this.getdata();},sevendays:function (id) {$.ajax({url: '/tp5/public/index.php/Index/Index/sevenDays',type: 'post',data: {platform_data_id: id},success: (response) => {if (response.status == 0) {this.seven_days = response.data;$("#comboModel").modal("show");}}});}},mounted: function(){this.getdata();}})
</script></body>
</html>

index.php

<?php
namespace app\index\controller;
use think\Request;
class Index
{public function index(){return view('index');}public function lists(){$request = Request::instance();$post = $request->post();;$page = $post['page'] ?? 1;//第几页$pageSize=6;//每页条数$title = $post['title'] ?? '';$data = [["id"=>1,"day"=>"2019-04-10","name"=>"今日头条","appId"=>"wx18adfafdaf345S","user_source"=>"公众号搜索","new_user"=>12,"cancel_user"=>65,"cumulate_user"=>548,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>2,"day"=>"2019-04-10","name"=>"美团","appId"=>"wx18adfafdaf345S","user_source"=>"扫描二维码","new_user"=>23,"cancel_user"=>34,"cumulate_user"=>354,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>3,"day"=>"2019-04-10","name"=>"美图","appId"=>"wx18adfafdaf345S","user_source"=>"公众号搜索","new_user"=>34,"cancel_user"=>54,"cumulate_user"=>5678,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>4,"day"=>"2019-04-10","name"=>"饿了吗","appId"=>"wx18adfafdaf345S","user_source"=>"公众号搜索","new_user"=>36,"cancel_user"=>34,"cumulate_user"=>354,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>5,"day"=>"2019-04-10","name"=>"汉堡王","appId"=>"wx18adfafdaadf45S","user_source"=>"支付后关注","new_user"=>43,"cancel_user"=>32,"cumulate_user"=>354,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>6,"day"=>"2019-04-10","name"=>"必胜客","appId"=>"wx18adfasfg45S","user_source"=>"名片分享","new_user"=>45,"cancel_user"=>34,"cumulate_user"=>5445,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>7,"day"=>"2019-04-10","name"=>"欢乐谷","appId"=>"wx18adfafdaf345S","user_source"=>"扫描二维码","new_user"=>67,"cancel_user"=>54,"cumulate_user"=>4355,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>8,"day"=>"2019-04-10","name"=>"里脊肉串","appId"=>"wx18adfafdaf345S","user_source"=>"图文页右上角菜单","new_user"=>34,"cancel_user"=>34,"cumulate_user"=>354,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>9,"day"=>"2019-04-10","name"=>"烤鱼","appId"=>"wx18adfafdaf345S","user_source"=>"公众号搜索","new_user"=>27,"cancel_user"=>54,"cumulate_user"=>5653,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>10,"day"=>"2019-04-10","name"=>"降龙十八掌","appId"=>"wx18adsfafdaf345S","user_source"=>"名片分享","new_user"=>23,"cancel_user"=>34,"cumulate_user"=>354,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>11,"day"=>"2019-04-10","name"=>"肯德基","appId"=>"wx18adfasdff345S","user_source"=>"公众号文章广告","new_user"=>68,"cancel_user"=>54,"cumulate_user"=>345,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>12,"day"=>"2019-04-10","name"=>"星巴克","appId"=>"wx18adfafasd45S","user_source"=>"扫描二维码","new_user"=>34,"cancel_user"=>65,"cumulate_user"=>789,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>13,"day"=>"2019-04-10","name"=>"喜茶","appId"=>"wx18adfafdaasfS","user_source"=>"名片分享","new_user"=>67,"cancel_user"=>34,"cumulate_user"=>9467,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],["id"=>14,"day"=>"2019-04-10","name"=>"美柚","appId"=>"wx18adfafdasdasdS","user_source"=>"图文页右上角菜单","new_user"=>56,"cancel_user"=>34,"cumulate_user"=>906,"headimg"=>"http://thirdwx.qlogo.cn/mmopen/vi_32/S35HlFw9WNSwTW2JicZ4fp9Gm9yF92K4vQjPnmKiactYS8BRpsg11yfFfHibUHlauUIOUib3dnnmvhbNR3e3BOCUXw/132"],];$count = count($data);$new_data = array_slice($data,($page-1)*$pageSize,$pageSize);return ['data'=>$new_data,'page_count'=>ceil($count/$pageSize),'per_page'=>$pageSize,'page'=>$page];}public function sevenDays(){$request = Request::instance();$post = $request->post();$id = $post['platform_data_id']??"";$data = [["id"=>1,"day"=>"2019-04-10","user_source"=>"名片分享","new_user"=>45,"cancel_user"=>34,"cumulate_user"=>6774],["id"=>2,"day"=>"2019-04-09","user_source"=>"名片分享","new_user"=>45,"cancel_user"=>78,"cumulate_user"=>5445],["id"=>3,"day"=>"2019-04-08","user_source"=>"扫描二维码","new_user"=>45,"cancel_user"=>4,"cumulate_user"=>5445],["id"=>4,"day"=>"2019-04-07","user_source"=>"名片分享","new_user"=>45,"cancel_user"=>34,"cumulate_user"=>5445],["id"=>5,"day"=>"2019-04-06","user_source"=>"公众号文章广告","new_user"=>45,"cancel_user"=>45,"cumulate_user"=>3524],["id"=>6,"day"=>"2019-04-05","user_source"=>"名片分享","new_user"=>45,"cancel_user"=>87,"cumulate_user"=>4556],["id"=>7,"day"=>"2019-04-04","user_source"=>"图文页右上角菜单","new_user"=>45,"cancel_user"=>12,"cumulate_user"=>645]];return ['data'=>$data];}
}

代码下载：https://download.csdn.net/download/longgeaisisi/11103353

vue+element-ui 实现分页（demo）相关推荐

Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI——搜索框DEMO
源代码 <template><div style="display: inline-flex"><el-inputv-model="keyw ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Vue +Element UI后台管理模板搭建示例
2019独角兽企业重金招聘Python工程师标准>>> 一.蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vu ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

vue+element-ui 实现分页（demo）

vue+element-ui 实现分页（demo）相关推荐

最新文章

热门文章