vue实现分页

最新推荐文章于 2023-08-17 12:36:15 发布
最新推荐文章于 2023-08-17 12:36:15 发布
阅读量1.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhl999999999/article/details/82784578
本文介绍了一种结合前端和后端实现的分页功能，涵盖了数据的增删改查操作。前端部分展示了如何使用Vue.js进行弹窗提示、表格数据展示及分页导航。后端接口调用部分则详细解释了如何通过发送HTTP请求获取数据，并实现数据的分页显示。此外，文章还涉及了数据校验、批量操作和状态更新等实用功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.前端分页（附带增删改）：

<template>
    <div class="hello">
        <!--弹出框-->
        <div class="modal-all" v-bind:style="{display:display}">
            <span class="verticalAlign"></span>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="close">×
                </button>
                        <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
                    </div>
                    <div class="modal-body">
                        <div style="width: 150px;">内容不能为空！</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="close" data-dismiss="modal" @click="close">关闭
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!--弹出框结束-->
        <div class="table-wrap full-content">
            <div class="table-left full-left">
                <ul class="left-menu">
                    <li class="active">
                        <a href="#">
                            <router-link :to="{name:'AddDrug',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">
                                <i class="fa fa-list-ul"></i>
                                <dd>疫苗列表</dd>
                            </router-link>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <router-link :to="{name:'DrugTable',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">
                                <i class="fa fa-edit"></i>
                                <dd>疫苗填报</dd>
                            </router-link>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <router-link :to="{name:'ExportDrug',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">
                                <i class="fa fa-server"></i>
                                <dd>导出列表</dd>
                            </router-link>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="table-right full-right">
                <div class="posi-wrap">
                    <ul class="posi-ul">
                        <li>
                            <a href=""><i class="fa fa-database"></i>系统基础数据</a>
                        </li>
                        <li><span>></span>疫苗接种数报表</li>
                    </ul>
                </div>
                <div class="main-wrap-fff">
                    <div class="container-fluid form-wrap dataOne">
                        <div class="row ser-block">
                            <div class="col-xs-12">
                                <div class="key-wrap keyser">
                                    <div class="ser-wrap">
                                        <button class="data-ser" @click="add" id="add">添加</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="table-responsive">
                                    <table class="table data-table">
                                        <thead>
                                            <tr class="data-order" data-order="id" data-sort="1">
                                                <th class="order" data-order="a">
                                                    <div class="drop-wrap">
                                                        <span>序号</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="b">
                                                    <div class="drop-wrap">
                                                        <span>疫苗简称</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="c">
                                                    <div class="drop-wrap">
                                                        <span>生产厂家</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="d">
                                                    <div class="drop-wrap">
                                                        <span>规格</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="e">
                                                    <div class="drop-wrap">
                                                        <span>操作</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="data-tbody" id="tbody">
                                            <tr v-for="(item,index) in list" v-bind:id="item.ID">
                                                <td>{{index+1}}</td>
                                                <td>{{item.VaccinName}}</td>
                                                <td>{{item.Factory}}</td>
                                                <td>{{item.Unit}}</td>
                                                <td>
                                                    <button class="btn-table btn-warning" v-bind:id="item.ID" @click="EditData">编辑</button>&nbsp;&nbsp;
                                                    <button class="btn-table btn-danger" v-bind:id="['b'+item.ID]" @click="deleteData">删除</button>
                                                </td>
                                                <!--<td>{{item.Year}}</td>
                                                <td>{{item.Month}}</td>
                                                <td>{{item.CreateDate}}</td>-->
                                            </tr>
                                            <tr id="addtr" style="display: none;">
                                                <td></td>
                                                <td><input required='required'></td>
                                                <td><input required='required'></td>
                                                <td><input required='required'></td>
                                                <td>
                                                    <button class="btn-table btn-primary" @click="save" style="display: none;" id="save">保存</button>&nbsp;&nbsp;
                                                    <button class="btn-table btn-default" @click="cancel" style="display: none;" id="cancel">取消</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot class="data-tfoot">
                                            <tr>
                                                <td colspan="20" style="margin:0px;padding:0px;padding-left:10px;padding-right:10px;">
                                                    <div class="my-page">
                                                        <div class="my-page" data-nowpage="1" data-maxpage="10" data-pagenum="10" data-nums="99">
                                                            <a class="firstPage disabled" data-href="1" href="javascript:void(0);" @click="firstPage">首页</a>
                                                            <a class="prevPage disabled" @click="prevPage" data-href="0" href="javascript:void(0);">上一页</a> &nbsp; &nbsp;<span>第<span id="CurrentPage">1</span>页，共<span id="total"></span>页</span>&nbsp; &nbsp;
                                                            <a class="nextPage" data-href="2" href="javascript:void(0);" @click="nextPage">下一页</a>
                                                            <a class="lastPage" data-href="10" href="javascript:void(0);" @click="lastPage">尾页</a>&nbsp; &nbsp;
                                                            <span v-bind:style="{color:colorMessage}">{{warnMessage}}</span>
                                                            <div class="pull-right">每页显示
                                                                <select id="selectChange" @change="selectChangePage">
                                                                    <option value="5">5</option>
                                                                    <option value="10">10</option>
                                                                    <option value="20">20</option>
                                                                    <option value="30">30</option>
                                                                    <option value="50">50</option>
                                                                    <option value="100" selected="selected">100</option>
                                                                </select>条，共<span id="numRow"></span>条</div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    var pageSize = ''; //每页显示条数
    var num = ''; //总条数
    var totalPage = ''; //总页数
    var currentPage = ''; //当前页
    export default {
        name: 'HelloWorld',
        data() {
            return {
                colorMessage: "",
                warnMessage: "", //提示信息
                display: "none",
                list: [],
                admin:this.$route.params.admin,
                Right:this.$route.params.Right,
                IsAllDesk:this.$route.params.IsAllDesk,
            }
        },
        mounted: function() {
            this.getData(); //定义方法
        },
        methods: {
            IsShow() { //显示隐藏判断
                pageSize = $("#selectChange").val();//每页显示条数
                num = this.list.length; //总条数
                $("#numRow").text(num);
                for(var i = 0; i < num; i++) {
                    var irow = $("#tbody tr")[i];
                    if(i < pageSize) {
                        irow.style.display = "table-row";
                    } else {
                        irow.style.display = "none";
                    }
                }
            },
            getData() {
                /*接口请求*/
                this.$http.post(../a/b/FindAll', {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.list = res.body.result;
                        setTimeout(function() {
                            this.selectChangePage();
                        }.bind(this), 2)
                    } else {
                        this.warnMessage = "获取失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
            },
            close() {
                this.display = "none";
            },
            add() {
                $("input")[0].value = '';
                $("input")[1].value = '';
                $("input")[2].value = '';
                document.getElementById("addtr").style.display = "table-row";
                $("button").attr("disabled", true);
                $("#save").attr("disabled", false);
                $("#cancel").attr("disabled", false);
                $("#close").attr("disabled", false);
                $(".close").attr("disabled", false);
                document.getElementById("save").style.display = "inline";
                document.getElementById("cancel").style.display = "inline";
            },
            save() {
                if($("input")[0].value == "" || $("input")[1].value == "" || $("input")[2].value == "") {
                    this.display = "block";
                } else {
                    this.display = "none";
                    let data = {
                        "VaccinName": $("input")[0].value, //疫苗简称
                        "Factory": $("input")[1].value, //生产厂家
                        "Unit": $("input")[2].value //规格
                    }
                    /*接口请求*/
                    this.$http.post('../a/b/Save', data, {
                        header: {},
                        emulateJSON: true
                    }).then((res) => {
                        if(res.body.code == "0") {
                            this.cancel();
                            this.getData();
                        }
                        console.info(res.body.message);
                    }).catch(err => {
                        this.warnMessage = "访问接口失败";
                        this.colorMessage = "red"
                    })
                }
            },
            cancel() {
                $("button").attr("disabled", false);
                document.getElementById("save").style.display = "none";
                document.getElementById("cancel").style.display = "none";
                document.getElementById("addtr").style.display = "none";
            },
            deleteData(e) { //删除数据
                var id = e.target.id; //当前行的id
                var es = id.substring(1, id.length);
                if(e.target.innerHTML == "删除") {
                    /*接口请求*/
                    this.$http.post('../a/b/Remove', {
                        "IDs": es
                    }, {
                        header: {},
                        emulateJSON: true
                    }).then((res) => {
                        this.getData();
                    }).catch(err => {
                        this.warnMessage = "访问接口失败";
                        this.colorMessage = "red"
                    })
                } else { //取消
                    var selectlist = this.list.filter(function(a) {
                        return e.ID == es;
                    })
                    $("tr#" + es + " td")[1].innerHTML = selectlist[0].VaccinName;
                    $("tr#" + es + " td")[2].innerHTML = selectlist[0].Factory;
                    $("tr#" + es + " td")[3].innerHTML = selectlist[0].Unit;
                    $("tr#" + es + " button")[0].innerHTML = "编辑";
                    e.target.innerHTML = "删除";
                    $("button").attr("disabled", false);
                }
            },
            EditData(e) { //编辑数据
                var eid = e.target.id; //当前行的id
                if(e.target.innerHTML == "编辑") {
                    var td1 = $("tr#" + eid + " td")[1].innerHTML;
                    var td2 = $("tr#" + eid + " td")[2].innerHTML;
                    var td3 = $("tr#" + eid + " td")[3].innerHTML;
                    $("tr#" + eid + " td")[1].innerHTML = "<input style='width: 60%;outline: none;border-bottom: 1px solid #ddd!important;border: none' required='required' value='" + td1 + "'/>";
                    $("tr#" + eid + " td")[2].innerHTML = "<input style='width: 60%;outline: none;border-bottom: 1px solid #ddd!important;border: none' required='required' value='" + td2 + "'/>";
                    $("tr#" + eid + " td")[3].innerHTML = "<input style='width: 60%;outline: none;border-bottom: 1px solid #ddd!important;border: none' required='required' value='" + td3 + "'/>";
                    e.target.innerHTML = "保存";
                    $("#b" + eid)[0].innerHTML = "取消";
                    $("button").attr("disabled", true);
                    e.target.disabled = false;
                    $("#b" + eid).attr("disabled", false);
                } else { //保存
                    if($("input")[0].value == "" || $("input")[1].value == "" || $("input")[2].value == "") {
                        this.warnMessage = "内容不能为空，请重新填写";
                        this.colorMessage = "red"
                    } else {
                        let data = {
                            "IDs": eid,
                            "VaccinName": $("input")[0].value, //疫苗简称
                            "Factory": $("input")[1].value, //生产厂家
                            "Unit": $("input")[2].value //规格
                        }
                        /*接口请求*/
                        this.$http.post('../a/b/Save', data, {
                            header: {},
                            emulateJSON: true
                        }).then((res) => {
                            if(res.body.code == "0") {
                                $("tr#" + eid + " td")[1].innerHTML = $("tr#" + eid + " input")[0].value;
                                $("tr#" + eid + " td")[2].innerHTML = $("tr#" + eid + " input")[0].value;
                                $("tr#" + eid + " td")[3].innerHTML = $("tr#" + eid + " input")[0].value;
                                e.target.innerHTML = "编辑";
                                $("tr#" + eid + " button")[1].innerHTML = "删除";
                                this.warnMessage = "编辑成功";
                                this.colorMessage = "green";
                                $("button").attr("disabled", false);
                            }
                        }).catch(err => {
                            this.warnMessage = "访问接口失败";
                            this.colorMessage = "red"
                        })
                    }
                }
            },
            selectChangePage() { //每页显示的条数
                $("#CurrentPage").text("1");
                this.IsShow();
                if(num / pageSize > parseInt(num / pageSize)) {
                    totalPage = parseInt(num / pageSize) + 1;
                } else {
                    totalPage = parseInt(num / pageSize);
                }
                $("#total").text(totalPage);
            },
            firstPage() { //首页
                $("#CurrentPage").text("1");
                currentPage = parseInt($("#CurrentPage").text()); //第几页
                this.IsShow();
                $(".prevPage").addClass("disabled");
                $(".firstPage").addClass("disabled");
                $(".nextPage").removeClass("disabled");
                $(".lastPage").removeClass("disabled");
            },
            lastPage() { //尾页
                $("#CurrentPage").text(totalPage);
                currentPage = parseInt($("#CurrentPage").text()); //第几页
                for(var i = 0; i < num; i++) {
                    var irow = $("#tbody tr")[i];
                    if(i > parseInt((totalPage - 1) * pageSize - 1)) {
                        irow.style.display = "table-row";
                    } else {
                        irow.style.display = "none";
                    }
                }
                $(".prevPage").removeClass("disabled");
                $(".firstPage").removeClass("disabled");
                $(".nextPage").addClass("disabled");
                $(".lastPage").addClass("disabled");
            },
            nextPage() { //下一页
                currentPage = parseInt($("#CurrentPage").text()); //第几页
                var startRow = currentPage * pageSize - 1; //开始显示的行 
                var endRow = (currentPage + 1) * pageSize; //结束显示的行
                if(currentPage < totalPage) {
                    $("#CurrentPage").text(parseInt(currentPage) + 1);
                    for(var i = 0; i < num; i++) {
                        var irow = $("#tbody tr")[i];
                        if(i > startRow && i < endRow) {
                            irow.style.display = "table-row";
                        } else {
                            irow.style.display = "none";
                        }
                    }
                }
                if(currentPage >= 1) {
                    $(".prevPage").removeClass("disabled");
                    $(".firstPage").removeClass("disabled");
                } else {
                    $(".prevPage").addClass("disabled");
                    $(".firstPage").addClass("disabled");
                }
                if(currentPage >= (parseInt(totalPage) - 1)) {
                    $(".nextPage").addClass("disabled");
                    $(".lastPage").addClass("disabled");
                } else {
                    $(".nextPage").removeClass("disabled");
                    $(".lastPage").removeClass("disabled");
                }
            },
            prevPage() { //上一页
                currentPage = parseInt($("#CurrentPage").text()); //第几页
                var startRow = (currentPage - 2) * pageSize; //开始显示的行 
                var endRow = (currentPage - 1) * pageSize - 1; //结束显示的行
                if(currentPage <= totalPage && currentPage > 1) {
                    $("#CurrentPage").text(parseInt(currentPage) - 1);
                    for(var i = 0; i < num; i++) {
                        var irow = $("#tbody tr")[i];
                        if(i >= startRow && i <= endRow) {
                            irow.style.display = "table-row";
                        } else {
                            irow.style.display = "none";
                        }
                    }
                }
                if(currentPage > 2) {
                    $(".prevPage").removeClass("disabled");
                    $(".firstPage").removeClass("disabled");
                } else {
                    $(".prevPage").addClass("disabled");
                    $(".firstPage").addClass("disabled");
                }
                if(currentPage > totalPage) {
                    $(".nextPage").addClass("disabled");
                    $(".lastPage").addClass("disabled");
                } else {
                    $(".nextPage").removeClass("disabled");
                    $(".lastPage").removeClass("disabled");
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    @import url("../static/public/plugins/bootstrap/css/bootstrap.min.css");
    @import url("../static/public/plugins/bootstrap/css/font-awesome.min.css");
    @import url("../static/public/plugins/bootstrap/css/font-awesome-animation.min.css");
    @import url("../static/public/static/css/main.css");
    div.hello {
        width: 100%;
        height: 100%;
    }
    
    table #tbody input {
        width: 60%;
        outline: none;
        border-bottom: 1px solid #ddd!important;
        border: none
    }
</style>

 

2.调用后端接口分页：

<!--配置信息上报-->
<template>
    <div class="desk">
        <!--弹出框-->
        <div class="modal-all" v-bind:style="{display:displayDiv}">
            <span class="verticalAlign"></span>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="closeT">×
                </button>
                        <h4 class="modal-title" id="myModalLabel">
                    疫情信息
                </h4>
                    </div>
                    <div class="modal-body">
                        <table>
                            <tr>
                                <td class="text-right">学校：</td>
                                <td>
                                    <select class="form-control" @change="SchoolChange" id="school">
                                            <option v-for="option in selectSchool" v-bind:value="option.ID">{{option.Name}}</option>
                                    </select>
                                </td>
                                <td class="text-right">班级：</td>
                                <td>
                                    <select class="form-control" id="class">
                                            <option v-for="option in selectOption" v-bind:value="option.ID">{{option.ClassNo}}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-right">症状：</td>
                                <td><input id="Symptom" name="Symptom" class="form-control" required="required"></td>
                                <td class="text-right">人数：</td>
                                <td><input id="Count" name="Count" class="form-control" required="required"></td>
                            </tr>
                            <tr>
                                <td class="text-right">报告人：</td>
                                <td><input id="ReportPerson" name="ReportPerson" class="form-control" required="required"></td>
                                <td class="text-right">联系电话：</td>
                                <td><input id="Phone" name="Phone" class="form-control" required="required"></td>
                            </tr>
                            <tr>
                                <td class="text-right">首发病例时间：</td>
                                <td><input required="required" id="HappenTime" name="HappenTime" class="form-control"></td>
                                <td class="text-right">备注：</td>
                                <td><input required="required" id="Remark" name="Remark" class="form-control"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="submitNow">立即保存</button>
                        <button type="button" class="btn btn-default" @click="ResertInfo">重置信息</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!--弹出框结束-->
        <div class="table-wrap full-content">
            <div class="table-left full-left">
                <ul class="left-menu">
                    <li>
                        <a href="#">
                            <router-link :to="{name:'InfectiousManagement',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">
                                <i class="fa fa-list"></i>
                                <dd>传染病管理</dd>
                            </router-link>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <router-link :to="{name:'OutbreakReport',params:{admin:admin,IsAllDesk:IsAllDesk,Right:Right}}">
                                <i class="fa fa-list"></i>
                                <dd>学校疫情上报</dd>
                            </router-link>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="table-right full-right">
                <div class="posi-wrap">
                    <ul class="posi-ul">
                        <li>
                            <a href=""><i class="fa fa-database"></i>疾病风险管理</a>
                        </li>
                        <li><span>></span>学校疫情上报</li>
                    </ul>
                </div>
                <div class="main-wrap-fff">
                    <div class="container-fluid form-wrap dataOne">
                        <div class="row ser-block">
                            <div class="col-xs-3">
                                <div class="key-wrap keyser">
                                    <div class="ser-wrap">
                                        <button class="data-ser" @click="Add">新增</button>
                                    </div>
                                    <div class="ser-wrap" style="margin-left: 13px;">
                                        <button class="data-ser" @click="Appear">上报</button>
                                    </div>
                                    <div class="ser-wrap" style="margin-left: 13px;">
                                        <button class="data-ser" style="width: 90px;" @click="deleteData">批量删除</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="key-wrap keyser" style="width:700px;">
                                    <div class="input-wrap widthLable">
                                        学校：
                                    </div>
                                    <div class="input-wrap widthSelect">
                                        <select class="form-control" @change="SchoolChange" id="school">
                                            <option value="">请选择</option>
                                            <option v-for="option in selectSchool" v-bind:value="option.ID">{{option.Name}}</option>
                                        </select>
                                    </div>
                                    <div class="input-wrap widthLable">
                                        班级：
                                    </div>
                                    <div class="input-wrap widthSelect">
                                        <div class="btn-group bootstrap-select show-tick" v-bind:class="{'open':open,'unopen':!open}">
                                            <button type="button" class="btn dropdown-toggle bs-placeholder" id="buttonSelect" title="" @click="clicked">
                                            <span class="filter-option pull-left"></span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
                                            <div class="dropdown-menu open" role="combobox" style="max-height: 924px; overflow: hidden; min-height: 130px;">
                                                <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 874px; overflow-y: auto;                                                 min-height: 80px;">
                                                    <li data-original-index="0" v-for="(item,index) in selectOption" data-id="item.ID" @mousedown="selectStyle(item,index)" v-bind:class="{'selected':item.selected,'unselected':!item.selected}">
                                                        <a tabindex="index" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                                                            <span class="text">{{item.ClassNo}}</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                                                    </li>
                                                </ul>
                                                <div class="bs-donebutton">
                                                    <div class="btn-group btn-block"><button type="button" class="btn btn-sm" @click="clicked">关闭</button></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ser-wrap btnWidth" style="margin-right: 13px;">
                                        <button class="data-ser" @click="selectData">查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="table-responsive">
                                    <table class="table data-table">
                                        <thead>
                                            <tr class="data-order" data-order="id" data-sort="1">
                                                <th class="order" data-order="">
                                                    <div class="drop-wrap">
                                                        <span><input type="checkbox" v-bind:checked="checked" @click="CheckedAll"></span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="a">
                                                    <div class="drop-wrap">
                                                        <span>序号</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="b">
                                                    <div class="drop-wrap">
                                                        <span>学校</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="c">
                                                    <div class="drop-wrap">
                                                        <span>班级</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="d">
                                                    <div class="drop-wrap">
                                                        <span>症状</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="e">
                                                    <div class="drop-wrap">
                                                        <span>人数</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="f">
                                                    <div class="drop-wrap">
                                                        <span>报告人</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="g">
                                                    <div class="drop-wrap">
                                                        <span>联系</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="h">
                                                    <div class="drop-wrap">
                                                        <span>首发病例时间</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="i">
                                                    <div class="drop-wrap">
                                                        <span>备注</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="j">
                                                    <div class="drop-wrap">
                                                        <span>状态</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                                <th class="order" data-order="h">
                                                    <div class="drop-wrap">
                                                        <span>操作</span>&nbsp;<ins></ins>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="data-tbody" id="tbody">
                                            <tr v-for="(item,index) in list" v-bind:id="item.ID">
                                                <td><input type="checkbox" v-bind:checked="checked" name="checked" v-bind:id="item.ID"></td>
                                                <td>{{item.ID}}</td>
                                                <td>{{item.SchoolID}}</td>
                                                <td>{{item.ClassID}}</td>
                                                <td>{{item.Symptom}}</td>
                                                <td>{{item.Count}}</td>
                                                <td>{{item.ReportPerson}}</td>
                                                <td>{{item.Phone}}</td>
                                                <td>{{item.HappenTime}}</td>
                                                <td>{{item.Remark}}</td>
                                                <td>{{(item.Status=="0")? "未上报" : "已上报"}}</td>
                                                <td><button class="btn-table btn-warning" v-bind:id="item.ID" @click="EditInfo">编辑</button></td>
                                            </tr>
                                        </tbody>
                                        <tfoot class="data-tfoot">
                                            <tr>
                                                <td colspan="20" style="margin:0px;padding:0px;padding-left:10px;padding-right:10px;">
                                                    <div class="my-page">
                                                        <div class="my-page" data-nowpage="1" data-maxpage="10" data-pagenum="10" data-nums="99">
                                                            <a class="firstPage disabled" data-href="1" href="javascript:void(0);" @click="firstPage">首页</a>
                                                            <a class="prevPage disabled" @click="prevPage" data-href="0" href="javascript:void(0);">上一页</a> &nbsp; &nbsp;<span>第<span id="CurrentPage">1</span>页，共<span id="total"></span>页</span>&nbsp; &nbsp;
                                                            <a class="nextPage" data-href="2" href="javascript:void(0);" @click="nextPage">下一页</a>
                                                            <a class="lastPage" data-href="10" href="javascript:void(0);" @click="lastPage">尾页</a>&nbsp; &nbsp;
                                                            <span v-bind:style="{color:colorMessage}">{{warnMessage}}</span>
                                                            <div class="pull-right">每页显示
                                                                <select id="selectChange" @change="selectChangePage">
                                                                    <option value="5">5</option>
                                                                    <option value="10" selected="selected">10</option>
                                                                    <option value="20">20</option>
                                                                    <option value="30">30</option>
                                                                    <option value="50">50</option>
                                                                    <option value="50">100</option>
                                                                </select>条，共<span id="numRow"></span>条</div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    var pageSize = ''; //每页显示条数
    var num = ''; //总条数
    var totalPage = ''; //总页数
    var currentPage = ''; //当前页
    export default {
        name: 'HelloWorld',
        data() {
            return {
                open: false,
                selected: false,
                shoolDisplay: "",
                selectSchool: [], //学校下拉框
                selectOption: [], //班级下拉框数据
                checked:false,
                colorMessage: "",
                warnMessage: "", //提示信息
                displayDiv: "none",
                admin:this.$route.params.admin,
                Right:this.$route.params.Right,
                IsAllDesk:this.$route.params.IsAllDesk,
                Aid: "",
                editData: [], //编辑行的数据
                list: []

            }
        },
        created: function(){
            if(this.IsAllDesk == false || this.IsAllDesk == "false") {
                this.slectList();
                this.shoolDisplay = "none";
            } else {
                this.shoolDisplay = "inline-block";
                this.slectSchool();
            }
        },
        mounted: function() {
            this.getData(); //定义方法
            laydate.render({
                elem: '#HappenTime' //指定元素
            });
        },
        methods: {
            slectList() {
                /*接口请求班级*/
                this.$http.post('../a/b/FindAllClass', {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.selectOption = res.body.result;
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
            },
            slectSchool() {
                /*接口请求班级*/
                this.$http.post('../a/b/FindAll', {}, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        this.selectSchool = res.body.result;
                        setTimeout(function() {
                            this.SchoolChange();
                        }.bind(this), 5)
                    } else {
                        this.warnMessage = "获取学校失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
            },
            SchoolChange() { //根据学校查询班级
                var schoolId=$("select#school").val();
                /*接口请求班级*/
                this.$http.post('../a/b/FindAllClass', {
                    "SchoolID":schoolId
                }, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    //console.info(res);
                    if(res.body.code == "0") {
                        if(res.body.result.length==0){
                            this.selectOption = [];
                        }else{
                            this.selectOption = res.body.result;
                        }
                        $(".pull-left").text("");
                        //console.info(this.selectOption);
                    } else {
                        this.warnMessage = "获取班级失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
            },
            clicked() {
                this.open = !this.open;
            },
            selectStyle(item, index) {　　　　　　
                this.$nextTick(function() {
                    if(item.selected == true) {
                        Vue.set(item, 'selected', false);　　
                    } else {
                        Vue.set(item, 'selected', true);
                    }
                });　
                setTimeout(function() {
                    var li = [];
                    $("li[class='selected']").each(function() {
                        li.push($(this).text()); //向数组中添加元素
                    });
                    var classs = li.join(',');
                    $(".pull-left").text(classs);
                    document.getElementById("buttonSelect").title = classs;　　　　
                },50)
            },
            getData() {
                let data = {
                    "SchoolName": $("#school").val(), //学校名称
                    "currentPage": $("#CurrentPage").text(), //当前页数
                    "pageSize": $("#selectChange").val(), //每页显示条数
                }
                /*接口请求*/
                this.$http.post('../a/b/RetrieveInfo', data, {
                    header: {},
                    emulateJSON: true
                }).then((res) => {
                    if(res.body.code == "0") {
                        if(res.body.count==0){
                            this.list = [];
                        }
                        this.list = res.body.result;
                        $("#numRow").text(res.body.count);
                        num = $("#numRow").text();
                        pageSize = $("#selectChange").val();
                        if(num / pageSize > parseInt(num / pageSize)) {
                            totalPage = parseInt(num / pageSize) + 1;
                        } else {
                            totalPage = parseInt(num / pageSize);
                        }
                        $("#total").text(totalPage);
                        this.warnMessage = "操作成功";
                        this.colorMessage = "green"
                    } else {
                        this.warnMessage = "获取数据失败";
                        this.colorMessage = "red"
                    }
                }).catch(err => {
                    this.warnMessage = "访问接口失败";
                    this.colorMessage = "red"
                })
            },
            CheckedAll() {
                this.checked = !this.checked //选中切换
            },
            selectData() { //查询数据
                $("#CurrentPage").text("1");
                this.getData(); //定义方法
            },
            Add(){//新增
                this.displayDiv = "block";
                this.ResertInfo();
                this.Aid = "";
            },
            Appear(){//上报
                var $checkbox = $('#tbody input[type="checkbox"][name="checked"]');
                var $checked = $('#tbody input[type="checkbox"][name="checked"]:checked');
                if($checkbox.is(":checked")) {
                    if(confirm('是否上报选中的信息？')) { //确认
                        var idArray = [];
                        $("input:checkbox[name='checked']:checked").each(function() {
                            idArray.push($(this).attr("id")); //向数组中添加元素
                        });
                        var idstring = idArray.join(','); //将数组元素连接起来以构建一个字符串
                        /*接口请求*/
                        this.$http.post('../a/b/SubmitInfo', {
                            "ID": idstring
                        }, {
                            header: {},
                            emulateJSON: true
                        }).then((res) => {
                            this.getData();
                        }).catch(err => {
                            this.warnMessage = "访问接口失败";
                            this.colorMessage = "red"
                        })
                    }
                } else {
                    this.warnMessage = "请选择要上报的信息";
                    this.colorMessage = "red"
                }
            },
            deleteData() { //删除数据
                var $checkbox = $('#tbody input[type="checkbox"][name="checked"]');
                var $checked = $('#tbody input[type="checkbox"][name="checked"]:checked');
                if($checkbox.is(":checked")) {
                    if(confirm('确定删除选中的信息？')) { //确认
                        var idArray = [];
                        $("input:checkbox[name='checked']:checked").each(function() {
                            idArray.push($(this).attr("id")); //向数组中添加元素
                        });
                        var idstring = idArray.join(','); //将数组元素连接起来以构建一个字符串
                        /*接口请求*/
                        this.$http.post('../a/b/RemoveDesk', {
                            "IDs": idstring
                        }, {
                            header: {},
                            emulateJSON: true
                        }).then((res) => {
                            this.getData();
                        }).catch(err => {
                            this.warnMessage = "访问接口失败";
                            this.colorMessage = "red"
                        })
                    }
                } else {
                    this.warnMessage = "请选择要删除的信息";
                    this.colorMessage = "red"
                }
            },
            submitNow() {
                var school=$("#school").val(); //学校
                var classs=$("#class").val(); //班级
                var Symptom=$("#Symptom").val(); //症状
                var Count=$("#Count").val(); //人数
                var ReportPerson=$("#ReportPerson").val(); //报告人
                var Phone=$("#Phone").val(); //联系电话
                var HappenTime=$("#HappenTime").val(); //首发病例时间
                var Remark=$("#Remark").val(); //备注
                let AppearData = {
                    "ID":this.Aid,
                    "SchoolID": school,
                    "ClassID": classs,
                    "Symptom": Symptom,
                    "Count": Count,
                    "ReportPerson": ReportPerson,
                    "Phone": Phone,
                    "HappenTime": HappenTime,
                    "Remark": Remark,
                };
                if(school != "" && Symptom != "" && Count != ""&&HappenTime!="") {
                    /*接口请求*/
                    this.$http.post('../a/bEditInfo', AppearData, {
                        header: {},
                        emulateJSON: true
                    }).then((res) => {
                        //console.info(res);
                        if(res.body.code == "0") {
                            this.getData();
                        } else {
                            this.warnMessage = "获取数据失败";
                            this.colorMessage = "red"
                        }
                    }).catch(err => {
                        this.warnMessage = "访问接口失败";
                        this.colorMessage = "red"
                    })
                    this.displayDiv = "none";
                } else {
                    this.warnMessage = "学校，症状，人数,首发病例时间不能为空";
                    this.colorMessage = "red"
                }
            },
            EditInfo(e) {
                this.ResertInfo();
                this.displayDiv = "block";
                this.Aid = e.target.id; //当前行的id
                var ida = this.Aid;
                this.editData = this.list.filter(function(e) {
                    return e.ID == ida;
                });
                $("#school").val(this.editData[0].SchoolID); //学校
                $("#class").val(this.editData[0].ClassID); //班级
                $("#Symptom").val(this.editData[0].Symptom); //症状
                $("#Count").val(this.editData[0].Count); //人数
                $("#ReportPerson").val(this.editData[0].ReportPerson); //报告人
                $("#Phone").val(this.editData[0].Phone); //联系电话
                $("#HappenTime").val(this.editData[0].HappenTime.substring(0,this.editData[0].HappenTime.indexOf("T"))); //首发病例时间
                $("#Remark").val(this.editData[0].Remark); //备注
            },
            selectChangePage() { //每页显示的条数
                $("#CurrentPage").text("1");
                this.getData(); //定义方法
            },
            firstPage() { //首页
                $("#CurrentPage").text("1");
                this.getData(); //定义方法
                $(".prevPage").addClass("disabled");
                $(".firstPage").addClass("disabled");
                $(".nextPage").removeClass("disabled");
                $(".lastPage").removeClass("disabled");
            },
            lastPage() { //尾页
                $("#CurrentPage").text(totalPage);
                this.getData(); //定义方法
                $(".prevPage").removeClass("disabled");
                $(".firstPage").removeClass("disabled");
                $(".nextPage").addClass("disabled");
                $(".lastPage").addClass("disabled");
            },
            nextPage() { //下一页
                if(parseInt($("#CurrentPage").text()) < totalPage) {
                    currentPage = parseInt($("#CurrentPage").text()) + 1; //第几页
                    if(1 < currentPage < totalPage) {
                        $(".prevPage").removeClass("disabled");
                        $(".firstPage").removeClass("disabled");
                    } else {
                        $(".prevPage").addClass("disabled");
                        $(".firstPage").addClass("disabled");
                    }
                    if(currentPage == totalPage) {
                        $(".nextPage").addClass("disabled");
                        $(".lastPage").addClass("disabled");
                    } else {
                        $(".nextPage").removeClass("disabled");
                        $(".lastPage").removeClass("disabled");
                    }
                    $("#CurrentPage").text(currentPage);
                    this.getData(); //定义方法
                }
            },
            prevPage() { //上一页
                if(parseInt($("#CurrentPage").text()) > 1) {
                    currentPage = parseInt($("#CurrentPage").text()) - 1; //第几页
                    if(currentPage > 1) {
                        $(".prevPage").removeClass("disabled");
                        $(".firstPage").removeClass("disabled");
                    } else {
                        $(".prevPage").addClass("disabled");
                        $(".firstPage").addClass("disabled");
                    }
                    if(currentPage > totalPage) {
                        $(".nextPage").addClass("disabled");
                        $(".lastPage").addClass("disabled");
                    } else {
                        $(".nextPage").removeClass("disabled");
                        $(".lastPage").removeClass("disabled");
                    }
                    $("#CurrentPage").text(currentPage);
                    this.getData(); //定义方法
                }
            },
            deleteData() { //删除数据
                var $checkbox = $('#tbody input[type="checkbox"][name="checked"]');
                var $checked = $('#tbody input[type="checkbox"][name="checked"]:checked');
                if($checkbox.is(":checked")) {
                    if(confirm('确定删除选中的信息？')) { //确认
                        var idArray = [];
                        $("input:checkbox[name='checked']:checked").each(function() {
                            idArray.push($(this).attr("id")); //向数组中添加元素
                        });
                        var idstring = idArray.join(','); //将数组元素连接起来以构建一个字符串
                        /*接口请求*/
                        this.$http.post('../a/b/ClearInfo', {
                            "ID": idstring
                        }, {
                            header: {},
                            emulateJSON: true
                        }).then((res) => {
                            //console.info(res);
                            this.getData();
                        }).catch(err => {
                            this.warnMessage = "访问接口失败";
                            this.colorMessage = "red"
                        })
                    }
                } else {
                    this.warnMessage = "请选择要删除的信息";
                    this.colorMessage = "red"
                }
            },
            closeT() {
                this.displayDiv = "none";
            },
            ResertInfo() { //重置信息
                $("#school").val(this.selectSchool[0].ID);//学校
                $("#class").val(this.selectOption[0].ID);//班级
                $("#Symptom").val(""); //症状
                $("#Count").val(""); //人数
                $("#ReportPerson").val(""); //报告人
                $("#Phone").val(""); //联系电话
                $("#HappenTime").val(""); //首发病例时间
                $("#Remark").val(""); //备注
            }
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import url("../static/public/plugins/bootstrap/css/bootstrap.min.css");
    @import url("../static/public/plugins/bootstrap/css/font-awesome.min.css");
    @import url("../static/public/plugins/bootstrap/css/font-awesome-animation.min.css");
    @import url("../static/public/static/css/main.css");
    .desk {
        width: 100%;
        height: 100%;
    }
    
    .input-wrap {
        width: 35%;
        /*margin-right: 12px;*/
    }
    
    html {
        background: none;
    }
</style>

 

zhl999999999
关注
vue3:十三、分类管理-表格--分页功能
weixin_46001736的博客
05-21 1124
vue3:十三、分类管理-表格--分页功能
基于vue实现分页效果
08-28
基于Vue实现分页效果 基于Vue实现分页效果是指使用 Vue.js 框架来实现分页功能，以便更好地组织和展示大量数据。以下是相关知识点的总结： 1. 分页的基本概念：分页是指将大量数据分割成多个页面，以便更好地组织...
Vue.js 结合bootstrap 前端实现分页效果
03-09
Vue.js 结合bootstrap 前端实现分页效果
Vue.js实现分页
05-02 231
效果图 代码 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"&g...
vue实现一个分页组件
一杯苦恰啡的博客
11-30 4125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
Vue中实现分页
最新发布
weixin_52536274的博客
08-17 1022
1.构造分页组件，并注册为全局组件。
java代码-使用java，解决springboot+vue实现分页功能的源代码
04-03
java代码-使用java，解决springboot+vue实现分页功能的源代码 ——学习参考资料：仅用于个人学习使用！
vue实现分页加载效果
10-15
综上所述，Vue实现分页加载效果主要依赖于对Vue生命周期钩子的合理使用，以及对数据请求、处理和渲染的精心设计。分页加载的实现不仅提升了应用的性能，也让用户体验更加流畅。掌握并灵活运用这些知识点，对于前端...
vue实现分页的三种效果
11-20
本文实例为大家分享了vue实现分页效果的具体代码，供大家参考，具体内容如下 第一种效果：数据量不大时可采用 <!doctype html> <html lang="en"> <head> <meta ...
Vue 实现分页与输入框关键字筛选功能
12-30
分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 订单列表 <div class=search-box><input type=text name= id= class=order-search-input placeholder=关键词 v-model='search...
Vue.js 组件实现分页效果
03-14
为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。
Vue实现简单分页器
10-17
主要为大家详细介绍了Vue实现简单分页器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个用vue实现的分页组件
08-10
一个用vue实现的分页组件
VueJS实现表单分页
03-31
VueJS实现表单分页，包括审核状态，VueJS2.0实例demo，解压打开即可，无依赖环境
vue+element实现分页及条件搜索功能(纯前端分页).html
03-09
学习vue+element做用户条件分页查询遇到的坑! ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)!
使用vue实现分页
haohulala的博客
04-09 6474
使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页。可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码。上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项。isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑。我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑。具体的效果可以看下面的演示。
Vue实现分页组件
Amanda_wmy的博客
04-19 1130
Vue实现分页组件 实现：使用vue实现表格的分页功能 功能点： 点击页面序号可以跳转到相应页面 点击上一页或者下一页可以跳转页面，当页面在第一页时上一页无法点击，页面在最后一页时下一页无法点击。 始终显示第一页和最后一页，只有一页的时候显示一页 默认显示前五页，剩下的用…显示，若点击下一页，则前后都有…显示 注意：该项目是使用 vue-cli搭建的，分页的功能操作都是在子组件里面写的，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值