vue+element-ui 实现分页（demo）
效果图：
代码：
后端用的是tp5的框架
index.html
Title
查询
编号
公众号
日期
新增用户
取关用户
净增长用户
总用户
操作
{{ fdata.id }}
![]()
{{ fdata.name }}
{{ fdata.appId }}
{{ fdata.day }}
{{ fdata.new_user }}
{{ fdata.cancel_user }}
{{ fdata.new_user-fdata.cancel_user }}
{{ fdata.cumulate_user }}
近七天
暂无数据
index.php
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