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

效果图：代码：用的是tp5的框架index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel=...

林猛男

18887人浏览 · 2019-04-10 16:53:11

林猛男 · 2019-04-10 16:53:11 发布

效果图：
在这里插入图片描述
代码：
后端用的是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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

林猛男

@longgeaisisi

已为社区贡献1条内容