Menu

Vue分页插件分享,适用于非vue框架中的分页

发布时间:2019-11-01 14:32:35作者:柯曾栎热度: 710 ℃

前些时间写前台页面的时候遇到些问题。由于我的模板文件使用了layui,数据渲染我又使用了vue,如果使用layui的分页,在加载顺序上就会出问题,导致分页不能正常显示。因此就需要一款基于vue的分页插件。

下面是demo包下载地址:

/data/upload/editer/file/2019/11/01/5dbbd11b2beda.zip



 <script type="text/javascript" charset="utf-8" src="/static/js/vue-nav.js"></script>

    <style>
        /*分页相关样式*/
        ul,li {
            margin: 0px;
            padding: 0px;
        }

        .page-bar li {
            list-style: none;
            display: inline-block;
        }

        .page-bar li:first-child>a {
            margin-left: 0px
        }

        .page-bar a {
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            cursor: pointer
        }

        .page-bar a:hover {
            background-color: #eee;
        }

        .page-bar .active a {
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .page-bar i {
            font-style:normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }
    </style>
</head>
<body style="width: 90%;">
<div class="main" id="app">
    <p>{{msg}}</p>
    <table class="layui-table">
        <thead>
        <tr>
            <th>操作</th>
            <th>真实姓名</th>
            <th>性别</th>
            <th>入党时间</th>
            <th>参加工作时间</th>
            <th>人员类别</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in table">
            <td>
                <span v-if="item.checked == 1" @click="check(item)">
                    <input type="checkbox" checked>
                </span>
                <span v-if="item.checked == 0"  @click="check(item)">
                    <input type="checkbox">
                </span>
            </td>
            <td>{{item.name}}</td>
            <td>
                <span v-if="item.sex == 1">男</span>
                <span v-else-if="item.sex == 2">女</span>
                <span v-else>未完善</span>
            </td>
            <td>
                {{item.join_party_time}}
            </td>

            <td>
                {{item.start_job_time}}
            </td>
            <td>
                <span v-if="item.status == 1">在籍党员</span>
                <span v-else-if="item.status == 2">历史党员</span>
                <span v-else-if="item.status == 3">流入党员</span>
                <span v-else-if="item.status == 4">失联党员</span>
                <span v-else-if="item.status == 5">申请人</span>
                <span v-else-if="item.status == 6">积极分子</span>
                <span v-else-if="item.status == 7">发展对象</span>
                <span v-else-if="item.status == 8">预备党员</span>
                <span v-else-if="item.status == 0">普通</span>
                <span v-else>未完善</span>
            </td>
        </tr>

        </tbody>
    </table>
    <p>{{msg}}</p>
    <vue-nav :cur="cur" :all="all" :callback="callback"></vue-nav>
    <button class="layui-btn" @click="imports()">一键导入已选中人员</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            table:{},
            cur: 1,
            limit:40,
            all: 8,
            msg: '',
            checkedList:[]
        },
        components:{
            'vue-nav': Vnav
        },
        methods: {
            GetLists: function () {
                var url = "/admin/houbeiganbu/get_users.html";
                var that = this;
                $.post(url,{page:that.cur},function (e) {
                    console.log(e)
                    that.table = e.data;
                    var all = e.total / that.limit;
                    all = Math.ceil(all);
                    that.all = all
                })
            },
            callback:function(data) {
                this.cur = data;
                //this.msg = '你点击了'+data+ '页'
                this.GetLists();
            },
            //选中 未选中切换
            check:function (item) {
               if(item.checked == 0){
                   item.checked = 1;
                   this.checkedList.push(item.id);
               }else {
                   this.checkedList.splice(item.id);
                   //获取数组的index 索引
                   for (var i = 0; i < this.checkedList.length; i++) {
                       if (this.checkedList[i] == item.id) {
                           //return i;
                           this.checkedList.splice(i)
                       }
                   }
                   item.checked = 0;
               }
               this.msg = "当前已选中"+this.checkedList.length+"人。";
               console.log(item);
               console.log(this.checkedList)
            },
            imports:function () {
                if(this.checkedList.length < 1){
                    error("未选中任何人");
                    return false;
                }
                var url = "/admin/houbeiganbu/impost_to_ganbu.html";
                var that = this;
                $.post(url,{data:this.checkedList},function (e) {
                    if(e.code == 200){
                        success(e.msg);
                    }else {
                        error(e.msg);
                    }
                });
                setTimeout("location.reload()",2000);

            }
        },
        mounted:function () {
            this.GetLists();
        }

    });

</script>



下载文件中也有demo可以参考使用。

软件下载链接
点击下载(1积分) 如何下载 积分获取攻略

下载说明:本站软件全部都是由个收集,绝对无毒无公害!如若有侵权或,请联系qq571031767进行删除!
软件1群:209183654     2群:524440238    3群:397053211    4群:684245561

米醋儿 micuer.com