vue elementui分页条使用与.net后台sqlsugar等分页方法使用。常用分页模板

分页条

<div style="margin-top: 20px;margin-bottom: 20px;text-align: center;">
  <el-pagination
    :total="totalCount"
    :page-size="10"
    background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"/>
</div>

page-size写死的，完全可以写成变量

绑定的页数的变量

data() {
    return {
        feedbackList: [],
        totalCount: 0
    }
}

处理分页的方法与查询数据的方法

methods: {
    changeDateFormat(jsondate) {
        var date = new Date(jsondate).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        return date
    },
    // 处理分页的事件
    handleCurrentChange(val) {
      this.saveFeedback(val)
    },
    // 获取反馈 分页查询
    saveFeedback(PageIndex) {
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        const _this = this
        this.$http.get('/education/api/Feedback/GetFeedbackListByStudent', { PageIndex: PageIndex, PageSize: 10 }).then(res => {
            _this.feedbackList = res.data.data
            _this.totalCount = res.data.dataCount
            loading.close()
        }).catch(e => {
            loading.close()
        }
        )
    }
}

同样page-size写死的，完全可以写成变量

后台接口方法

接口入口

[HttpGet]
public ObjectResult GetFeedbackListByStudent([FromQuery] GetFeedbackDto input)
{
    //input.PageIndex = 1;
    //input.PageSize = 20;
    input.StudentID = currentUser.AccountID;
    //input.StudentUserName = currentUser.GetAccountInfo().UserName;
    PageData<Feedback> feedbacks = feedbackService.GetFeedbackListByStudent(input);
    return Success(feedbacks);
}

分页与数据查询方法

public PageData<Feedback> GetFeedbackListByStudent(GetFeedbackDto input)
{
    int dataCount = 0;
    List<Feedback> feedbacks = Db.Queryable<Feedback>()
        .Where(a => a.StudentID == input.StudentID)
        .OrderBy(a => a.CreateTime, OrderByType.Desc).ToPageList(input.PageIndex, input.PageSize, ref dataCount);
    var pagination = new PageData<Feedback>();
    pagination.PageIndex = input.PageIndex;
    pagination.PageSize = input.PageSize;
    pagination.DataCount = dataCount;
    pagination.Data = feedbacks;
    return pagination;
    //return feedbacks;
}

返回的实体

public class PageData<T> where T : class, new()
    {
        //
        // 摘要:
        //     当前页数
        public int PageIndex { get; set; }
        //
        // 摘要:
        //     每页数据条数
        public int PageSize { get; set; }
        //
        // 摘要:
        //     数据总条数
        public int DataCount { get; set; }
        //
        // 摘要:
        //     数据列表
        public IList<T> Data { get; set; }
    }

分页条件的base实体

public class QueryConditionBase
{
    public string? Key { get; set; } = "";
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
}

有其他条件就写个实体，继承它