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

    <!--表格列表信息-->
    <el-tablev-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"
    >
      <el-table-columntype="selection"width="40" />
      <el-table-columnalign="center"sortable="custom"prop="name"label="姓名">
        <templateslot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-columnalign="center"sortable="custom"prop="age"label="年龄">
        <templateslot-scope="scope">{{ scope.row.age }} 岁</template>
      </el-table-column>
      <!--日期字段信息，显示完整时间格式:formatter="timeFormat"，否则使用:formatter="dateFormat"-->
      <el-table-columnalign="center"label="创建时间"sortable="custom"width="160"prop="creationTime":formatter="timeFormat" />

methods: {

    sortChange({ column, prop, order }) {var direction = (order === 'ascending') ? ' ASC' : ' DESC'
      this.sorting = !this.isEmpty(prop) ? (prop + direction) : null
      this.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 = truecustomer.GetAll(param).then(data=>{this.list =data.result.itemsthis.pageinfo.total =data.result.totalCountthis.listLoading = false})

    },

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

        {

            CheckGetAllPermission();//检查权限

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

            var totalCount = await AsyncQueryableExecuter.CountAsync(query);  //获取记录总数
query= ApplySorting(query, input);  //排序
            query = ApplyPaging(query, input);   //分页

            var entities = await AsyncQueryableExecuter.ToListAsync(query);  //返回实体记录

            return new PagedResultDto<TEntityDto>(  //构建分页展示数据
totalCount,

                entities.Select(MapToEntityDto).ToList()  //实体转换DTO

            );

        }

        /// <summary>
        ///自定义条件处理/// </summary>
        /// <param name="input">查询条件Dto</param>
        /// <returns></returns>
        protected override IQueryable<Customer>CreateFilteredQuery(CustomerPagedDto input)

        {return base.CreateFilteredQuery(input)

                .WhereIf(!input.ExcludeId.IsNullOrWhiteSpace(), t=>t.Id != input.ExcludeId) //不包含排除ID
                .WhereIf(!input.Name.IsNullOrWhiteSpace(), t => t.Name.Contains(input.Name)) //如需要精确匹配则用Equals//年龄区间查询
                .WhereIf(input.AgeStart.HasValue, s => s.Age >=input.AgeStart.Value)

                .WhereIf(input.AgeEnd.HasValue, s=> s.Age <=input.AgeEnd.Value)//创建日期区间查询
                .WhereIf(input.CreationTimeStart.HasValue, s => s.CreationTime >=input.CreationTimeStart.Value)

                .WhereIf(input.CreationTimeEnd.HasValue, s=> s.CreationTime <=input.CreationTimeEnd.Value)

                ;

        }

        /// <summary>
        ///自定义排序处理/// </summary>
        /// <param name="query">可查询LINQ</param>
        /// <param name="input">查询条件Dto</param>
        /// <returns></returns>
        protected override IQueryable<Customer> ApplySorting(IQueryable<Customer>query, CustomerPagedDto input)

        {if (!string.IsNullOrEmpty(input.Sorting))//排序字段是否有值
{

                query=query.OrderBy(input.Sorting);

            }else{

                query= query.OrderByDescending(t =>t.CreationTime);

            }returnquery;
        }