初学vue element ui之el-pagination分页

初学vue element ui之el-pagination分页

目的

接触Vue一个多月，项目里要求每个页面都有分页的功能。在这里写下自己是如何完成的，一定有比我更简洁方便的方法，有所不足之处还望大家见谅！

前端代码

后端代码

var SelfModel = "";
export default { 
    data() {
        return { 
        //设置默认页数为1，默认数据条数为1
            cPage:1,
            totalCount: 1,  
        }
    },
    created() {
        SelfModel = this; 
        //调用getData();
        this.getData(1);
    }, 
    methods: {
  	   //上一页单击事件
        previousPage(){
            this.cPage--; 
            this.getData(cPage);
        },
        //下一页单击事件
        nextPage(){
            this.cPage++; 
            this.getData(cPage);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //处理每次当前页改变后的事件
        handleCurrentChange(val) { 
        //调用getData并传入val参数
            this.getData(val);
        }, 
        //获取数据
        getData(pageId) {
        //定义一个结构，存储页数的id
            var info = {
                "pageid": parseInt(pageId),
            }
            $.ajax({
            	//调用接口
                url: "/api/Lines/paging",
                type: "post",
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=UTF-8",
                data: JSON.stringify(info),
                success: function (result) {
               		 //给totoalCount的赋值
                    SelfModel.totalCount = result.Result.count;
                    var data = (result.Result.data);
                    //给table表赋值
                    SelfModel.tableData = data; 
                },
                beforeSend: function (xhr) {
                 xhr.setRequestHeader("Authorization", "Bearer " + localStorage.tokenType);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { 
                    return false;
                }
            });

        }, 
    }
}

服务端代码

[HttpPost("paging")]
        public async Task GetLines([FromBody]Paging paging)
        {
            try
            {
            //定义每页的数据数量
                int pageCount = 10;
                var data = _context.Line.Where(p => !p.Deleted);
                //定义数据总数量
                int count = data.Count();
                int page;
                if (count % pageCount == 0)
                {
                    page = count / pageCount;
                }
                else
                {
                    page = count / pageCount + 1;
                }
                //每页获取十条数据
                var newData = data.Skip((paging.pageid - 1) * pageCount).Take(pageCount);
                //返回 数据总量，页数，和数据
                return Ok(new
                {
                    count = count,
                    page = page,
                    data = newData,
                });
            }
            catch (Exception ex)
            {
                Debug.WriteLine(string.Format("ex:{0}", ex.Message));
            }
            return NotFound();
        }