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

川长思鸟来 2022-02-20 20:45 268阅读 0赞

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]  
**代码：**  
后端用的是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-pagination
                        background
                        @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][https_download.csdn.net_download_longgeaisisi_11103353]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]: /images/20220221/de49b4c3b12c4d34acc375b09614e0d6.png
[https_download.csdn.net_download_longgeaisisi_11103353]: https://download.csdn.net/download/longgeaisisi/11103353