tnblog
首页
视频
资源
登录
原

vue.js +elementui+ef 简单分页

4255人阅读 2021/11/27 9:09 总访问：803522 评论：0 收藏：0 手机
分类: 前端

后端

  1. public ActionResult GetUserInfo(int page = 1, int rows = 10)

  2. {

  3.     OAEntities oAEntities = new OAEntities();

  4.     List<UserInfo> userInfos = oAEntities.UserInfo.OrderBy(a => a.Id).Skip((page - 1) * rows).Take(rows).ToList();

  5.     int allcount = oAEntities.UserInfo.Count();

  6. 

  7.     return Json(new { allcount, userInfos }, JsonRequestBehavior.AllowGet);

  8. }

前端

  1. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  2. <script src="~/Scripts/jquery-3.3.1.min.js"></script>

  3. 

  4. <!DOCTYPE html>

  5. <html>

  6. <head>

  7.     <meta charset="UTF-8">

  8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  9. </head>

  10. <body>

  11. 

  12.     <div id="content">

  13.         <table>

  14.             <tr v-for="item in userinfo">

  15.                 <td v-bind:vl="item.Id">{{item.Id}}</td>

  16.                 <td :vl="item.Id">{{item.UserName}}</td>

  17.                 <td>{{item.Number}}</td>

  18.                 <td>{{item.UserClass}}</td>

  19.                 <td><a href="#" @@click="handlerRemove">删除</a></td>

  20.             </tr>

  21.         </table>

  22.         <div class="block">

  23.             <span class="demonstration"></span>

  24.             <el-pagination layout="total,prev, pager, next"

  25.                            :page-size="pagesize"

  26.                            :total="allpage"

  27.                            background

  28.                            @@current-change="handlerPage">

  29.             </el-pagination>

  30.         </div>

  31.     </div>

  32. </body>

  33. </html>

  34. 

  35. <script src="https://unpkg.com/vue/dist/vue.js"></script>

  36. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  37. <script>

  38. 

  39.     var vm = new Vue({

  40.         el: "#content",

  41.         data: {

  42.             userinfo: "",

  43.             allpage: 100,

  44.             pagesize: 10

  45.         },

  46.         methods: {

  47.             handlerRemove: function () {

  48.                 alert("删除");

  49.             },

  50.             handlerPage: function (val) {

  51. 

  52.                 getdata(val);

  53.             }

  54.         }

  55.     });

  56. 

  57.     var getdata = function (val) {

  58.         $.get('/vue/GetUserInfo', { page: val }, function (result) {

  59.             vm.userinfo = result.userInfos;

  60.             pa.$data.allpage = result.allcount;

  61.         })

  62.     }

  63. 

  64.     getdata(1);

  65. 

  66. </script>


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价
这一生多幸运赶上过你.
博主信息
排名
8
文章
207
粉丝
7
评论
7
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术