循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理(1)

1、Vue+Element前端的排序代码

================================================================================

我们首先参考一下Element界面组件的排序说明。如下效果是Element表格组件的排序效果。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

根据上面说明，我们这里采取的是后端排序，将sortable设置为custom。如下案例代码所示。

<el-table

v-loading=“listLoading”

:data=“list”

border

fit

stripe

highlight-current-row

:header-cell-style=“{background:‘#eef1f6’,color:‘#606266’}”

@selection-change=“selectionChange”

@row-dblclick=“rowDbclick”

@sort-change=“sortChange”

{{ scope.row.name }}

{{ scope.row.age }} 岁

以上是界面端的HTML代码，那么前端JS的处理逻辑也需要相应处理下，上面代码中 @sort-change=“sortChange” 定义了排序变化的触发事件处理。

methods: {

sortChange({ column, prop, order }) {

var direction = (order === ‘ascending’) ? ’ ASC’ : ’ DESC’

this.sorting = !this.isEmpty(prop) ? (prop + direction) : null

this.getlist()

},

以上代码主要逻辑是构建一个排序字符串，如：字段 ASC 或 字段 DESC的字符串，以供ABP后端的排序处理即可，这个主要是根据ABP框架排序特点进行提交的。

我们通过getlist的方法提交对应的查询条件和排序字符串，让后端再次获取数据给我们前端处理。

getlist() { // 列表数据获取

var param = { // 构造常规的分页查询条件

// 分页条件

SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

MaxResultCount: this.pageinfo.pagesize,

Sorting: this.sorting,

// 查询过滤条件

Name: this.searchForm.name,

AgeStart: this.searchForm.ageStart

};

// 使用日期范围选择控件，在查询对象增加开始日期CreationTimeStart、结束日期CreationTimeEnd

this.addDateRange(param, this.searchForm.creationTime)

// 获取列表，绑定到模型上，并修改分页数量

this.listLoading = true

customer.GetAll(param).then(data => {

this.list = data.result.items

this.pageinfo.total = data.result.totalCount

this.listLoading = false

})

},

那么剩下的时候，就是后端如何处理数据的问题了。

2、 ABP后端分页排序的处理

===========================================================================

我们查看ABP的应用服务层的接口基类可以看到，对应的获取所有记录GetAll方法的定义如下所示。

public virtual async Task<PagedResultDto> GetAllAsync(TGetAllInput input)

{

CheckGetAllPermission(); //检查权限

var query = CreateFilteredQuery(input); //构建查询条件

var totalCount = await AsyncQueryableExecuter.CountAsync(query); //获取记录总数

query = ApplySorting(query, input); //排序

query = ApplyPaging(query, input); //分页

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ging(query, input); //分页

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】