tnblog
首页
视频
资源
登录

vue.js +elementui+ef 简单分页

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

后端

  1. public ActionResult GetUserInfo(int page = 1int 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.     return Json(new { allcount, userInfos }, JsonRequestBehavior.AllowGet);
  7. }

前端

  1. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  2. <script src="~/Scripts/jquery-3.3.1.min.js"></script>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8. </head>
  9. <body>
  10.     <div id="content">
  11.         <table>
  12.             <tr v-for="item in userinfo">
  13.                 <td v-bind:vl="item.Id">{{item.Id}}</td>
  14.                 <td :vl="item.Id">{{item.UserName}}</td>
  15.                 <td>{{item.Number}}</td>
  16.                 <td>{{item.UserClass}}</td>
  17.                 <td><a href="#" @@click="handlerRemove">删除</a></td>
  18.             </tr>
  19.         </table>
  20.         <div class="block">
  21.             <span class="demonstration"></span>
  22.             <el-pagination layout="total,prev, pager, next"
  23.                            :page-size="pagesize"
  24.                            :total="allpage"
  25.                            background
  26.                            @@current-change="handlerPage">
  27.             </el-pagination>
  28.         </div>
  29.     </div>
  30. </body>
  31. </html>
  32. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  33. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  34. <script>
  35.     var vm = new Vue({
  36.         el"#content",
  37.         data: {
  38.             userinfo"",
  39.             allpage100,
  40.             pagesize10
  41.         },
  42.         methods: {
  43.             handlerRemovefunction ({
  44.                 alert("删除");
  45.             },
  46.             handlerPagefunction (val{
  47.                 getdata(val);
  48.             }
  49.         }
  50.     });
  51.     var getdata = function (val{
  52.         $.get('/vue/GetUserInfo', { page: val }, function (result{
  53.             vm.userinfo = result.userInfos;
  54.             pa.$data.allpage = result.allcount;
  55.         })
  56.     }
  57.     getdata(1);
  58. </script>


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

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