苏飞论坛

标题: vue.js+Ajax+分页+v-for+v-if+v-model使用例子 [打印本页]
作者: 站长苏飞    时间: 2018-12-21 12:12
标题: vue.js+Ajax+分页+v-for+v-if+v-model使用例子
vue.js+Ajax+分页+v-for+v-if+v-model使用例子

需求
1. 根据用户名查用户的所有登录日志
2. 带有分页
3. 安登录时间倒序
4.分页少于一页时不加载数据。

先来绑定一下搜索框的数据
[HTML] 纯文本查看 复制代码
 <td colspan="3">

                            <div class="form-control-wrap">

                                <label class="form-label">

                                    用户名：</label>

                                <input class="form-control ml1" v-model="username" />

                            </div>

                            <button class="btn btn-primary" v-on:click="getdata">

                                搜索</button>

                        </td>


v-model这个大家要注意，只能用于输入 输出框，基本上只能用在input类型的控件上，不能直接用于div
v-on:click是单击事件绑定的方法，方法名为getdata
我们下面直接用v-for来循环输出数据
[HTML] 纯文本查看 复制代码
<table class="table table-page">

                    <thead>

                        <tr>

                            <td align="center">

                                用户名

                            </td>

                            <td align="center">

                                登录时间

                            </td>

                            <td align="center">

                                登录IP

                            </td>

                            <td align="center">

                                useragent

                            </td>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for="info in userlogs">

                            <td align="center">

                                {{ info.User_name}}

                            </td>

                            <td align="center">

                                {{ info.StrUser_createdate}}

                            </td>

                            <td align="center">

                                {{ info.User_ip}}

                            </td>

                            <td align="center">

                                {{ info.User_useragent}}

                            </td>

                        </tr>

                    </tbody>

关于分页部分的处理如下
[HTML] 纯文本查看 复制代码
 <tfoot>

                        <tr>

                            <td colspan="11">

                                <div class="pagination-wrap">

                                    <div class="count">

                                         <div  >总页数  {{ pageCount}}    总记录数 {{ totalcount}}  </div>

                                    </div>

                                    <ul class="pagination" v-if="pageCount > 1">

                                        <li v-for="n in pageCount"><a href="javascripit:void(0)" v-bind:class="pageIndex === n + 1 ? 'active' : ''">

                                            {{ n + 1 }}</a> </li>

                                    </ul>

                                </div>

                            </td>

                        </tr>

                    </tfoot>


好了数据看一下

[JavaScript] 纯文本查看 复制代码
 <script type="text/javascript">

        var rw = new Vue({

            el: "#grid",

            data: {

                pageIndex: 1, //当前页

                pageCount: 0, //一共多少页

                totalcount: 0, //总行数

                pageSize: 10, //显示多少页

                username: "", //用户名

                userlogs: "" //用户列表集合

            },

            methods: {

                getdata: function (event) {

                    axios({

                        method: 'get',

                        url: "/System/Crm_User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + this.pageIndex

                    }).then(function (res) {

                        var data = res.data;

                        if (data.reCode > 0) {

                            rw.$data.pageCount = Math.floor(data.TotalCount / data.pageSize);

                            rw.$data.totalcount = data.TotalCount;

                            rw.$data.username = data.username;

                            rw.$data.pageSize = data.pageSize;

                            rw.$data.pageIndex = data.pageIndex;

                            rw.$data.userlogs = data.info;

                        }

                    });

                }

            }

        });

    </script>


我直接用的是axios组件，这个好像只能在V2.0以后使用，直接引用axios.min.js代码就行了。
两个类发上来大家方便下载
(, 下载次数: 3)