优点：

1.选用layui国产。

2.layui有一套完整的前端框架，基本哪来就可以用。

3.选用vue去掉了很多页面元素js拼接的繁琐，及不易修改。

4.vue里面还有一些过滤器等，用起来很方便。

列表页：

1.用vue数据绑定，加载表格。

2.用layui做分页处理。

3.用的bootstrap做列表样式。也可以用layui的一套列表样式

4.用vue插件axios，做ajax请求。

先上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="../bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />

    <link href="animate.css" rel="stylesheet" />

    <link href="../layui/layui/css/layui.css" rel="stylesheet" />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="../layui/layui/layui.js"></script>

</head>

<body>

    <div id="app" class="container">

        <table class="table table-bordered ">

            <thead>

                <tr>

                    <td>Id</td>

                    <td>姓名</td>

                    <td>年龄</td>

                    <td>性别</td>

                </tr>

            </thead>

            <tbody>

                <tr class="animated jello" v-for="item in list">

                    <td>{{item.Id}}</td>

                    <td>{{item.Name}}</td>

                    <td>{{item.Age}}</td>

                    <td>{{item.Sex | sex}}</td>

                </tr>

            </tbody>

        </table>

        <div id="laypage"></div>

    </div>

    <script>

        //var total = 0;

        var vm = new Vue({

            el: '#app',

            data: {

                list: [],

                total: -1,

                pageIndex: 1,

                pageSize:2,

            },

            methods: {

                loadList: function () {

                    axios.get('/data.ashx?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize).then(result => {

                        console.log(result);

                        this.list = result.data.Data;

                        this.total = result.data.Total;

                        if (this.pageIndex==1) {

                            loadPage();

                        }

                    });

                }

            },

            //钩子函数：data和methods加载后执行

            created: function () {

                this.loadList();

                //loadPage();

            },

            filters: {

                sex: function (data) {

                    return data ? '男' : '女';

                }

            }

        })

        function loadPage() {

            layui.use(['laypage', 'layer'], function () {

                var laypage = layui.laypage,

                    layer = layui.layer;

                laypage.render({

                    elem: 'laypage',

                    count: vm.total, //数据量

                    limit: vm.pageSize,//每页限制

                    jump: function (obj, first) { //点击跳转函数

                        //obj包含了当前分页的所有参数，比如：

                        console.log(obj);

                        console.log(first);

                        //首次不执行

                        if (!first) {

                            vm.pageIndex = obj.curr;

                            vm.loadList();

                            //loadData(obj.curr, obj.limit);

                        }

                    }

                });

            });

        }

    </script>

</body>

</html>

　　

后端请求数据代码：这里写的比较简单，做个演示。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace 前端

{

    /// <summary>

    /// data 的摘要说明

    /// </summary>

    public class data : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            string pageIndex = context.Request.QueryString["pageIndex"];

            string pageSize = context.Request.QueryString["pageSize"];

            List<Person> list = new List<Person>();

            list.Add(new Person() { Id=1,Name="张三",Age=23,Sex=1});

            list.Add(new Person() { Id = 2, Name = "斯蒂芬", Age = 23, Sex = 0 });

            list.Add(new Person() { Id = 3, Name = "非公党委", Age = 29, Sex = 1 });

            var resultList = list.Skip((int.Parse(pageIndex) - 1) * int.Parse(pageSize)).Take(int.Parse(pageSize)).ToList();

            context.Response.ContentType = "text/plain";

            context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new {

                Total = list.Count,

                Data = resultList

            }));

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

        public class Person

        {

            public int Id { get; set; }

            public string Name { get; set; }

            public int Age { get; set; }

            public int Sex { get; set; }

        }

    }

}

　　

vue+layui制作列表页的更多相关文章

  1. vue+h-ui+layUI完成列表页及编辑页

    最近做一个新项目,用H-ui做后台, 比较喜欢他的模仿bootsharp的栅格和表单样式. 感觉不好的是iframe加载速度比较慢. 这里在原有的H-ui页面基础上加入用vue来绑数据,用的还可以. ...

  2. vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  3. vue keep-alive从列表页进入详情页，再返回列表页时，还是之前滚动的位置

    //router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...

  4. Vue+koa2开发一款全栈小程序(8.图书列表页）

    1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...

  5. 在vue中无论使用router-link 还是 @click事件，发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  6. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

  7. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  8. Flutter实战视频-移动电商-35.列表页_上拉加载更多制作

    35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...

  9. vue 详情跳转至列表页 实现列表页缓存

    甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...

随机推荐

  1. NX二次开发-常用lib库文件

    在项目属性->配置属性->链接器->输入->附加依赖项: libufun.lib UFUNC API 函数库 libugopenint.lib UFUNC 对话框 API 函数 ...

  2. 使用Devstack部署neutron网络节点

    本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...

  3. 面试总结【css篇】- 盒子模型

    题目:谈谈你对CSS盒模型的认识 (1) 基本概念:标准模型+IE模型   (2) 标准模型和IE模型区别 标准模型和IE模型的区别,就是宽度和高度的计算方式不同. 标准模型的宽度指的就是conten ...

  4. 使用R语言 SDK调取tushare数据

    安装Tushare 打开RStudio,在控制台输入命令: > install.packages('Tushare') Tushare的R包需要依赖httr.tidyverse.forecast ...

  5. Codeforces 479【C】div3

    题目链接:http://codeforces.com/problemset/problem/977/C 题意:给你n个数字,输出任意一个数字,这个数字刚好大于等于,序列里面k个数字. 题解:排个序,第 ...

  6. Neo4j 3.5发布，在索引方面大幅增强

    Neo4j 3.5版本已正式发布,这也是Neo4j宣布企业版闭源以来发布的第一个版本. 这个版本在性能.资源使用率以及安全方面均有增强,我们可以先快速浏览一下这个版本: 全文索引 基于Index的快速 ...

  7. SPRING+JPA+Hibernate配置方法

    1.applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...

  8. JS对象 四舍五入round() round() 方法可把一个数字四舍五入为最接近的整数。 语法: Math.round(x)

    四舍五入round() round() 方法可把一个数字四舍五入为最接近的整数. 语法: Math.round(x) 参数说明: 注意: 1. 返回与 x 最接近的整数. 2. 对于 0.5,该方法将 ...

  9. Linux 常用命令：解压缩篇

    前言 Linux常用命令中,有很多用于对文件的压缩或解压,本文将介绍这些解压缩命令中不常见却非常实用的用法. tar tar是linux中最常用的解压缩命令.tar命令可用于处理后缀名为tar,tar ...

  10. 配置文件一web.xml

    前言 web.xml中标签的加载顺序:<context-param> > <listener> (spring的相关工作) > filter >servlet ...