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

<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的方法提交对应的查询条件和排