vue.js +elementui+ef 简单分页
电脑版发表于：2021/11/27 9:09
后端
public ActionResult GetUserInfo(int page = 1, int rows = 10)
{
OAEntities oAEntities = new OAEntities();
List<UserInfo> userInfos = oAEntities.UserInfo.OrderBy(a => a.Id).Skip((page - 1) * rows).Take(rows).ToList();
int allcount = oAEntities.UserInfo.Count();
return Json(new { allcount, userInfos }, JsonRequestBehavior.AllowGet);
}前端
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="content">
<table>
<tr v-for="item in userinfo">
<td v-bind:vl="item.Id">{{item.Id}}</td>
<td :vl="item.Id">{{item.UserName}}</td>
<td>{{item.Number}}</td>
<td>{{item.UserClass}}</td>
<td><a href="#" @@click="handlerRemove">删除</a></td>
</tr>
</table>
<div class="block">
<span class="demonstration"></span>
<el-pagination layout="total,prev, pager, next"
:page-size="pagesize"
:total="allpage"
background
@@current-change="handlerPage">
</el-pagination>
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el: "#content",
data: {
userinfo: "",
allpage: 100,
pagesize: 10
},
methods: {
handlerRemove: function () {
alert("删除");
},
handlerPage: function (val) {
getdata(val);
}
}
});
var getdata = function (val) {
$.get('/vue/GetUserInfo', { page: val }, function (result) {
vm.userinfo = result.userInfos;
pa.$data.allpage = result.allcount;
})
}
getdata(1);
</script>