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

电脑版发表于：2019/6/29 18:28

#### 分页条
```
<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; }
}
```
有其他条件就写个实体，继承它

剑轩

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

{{item.title}}