element-ui学习一:table表格字段排序

一、 概述

elementui官网已有相关解释,可以去官网查看。这边再简单讲述一下具体使用方法

二、前端排序

在对应需要排序的字段中,使用sortable字段即可,这样就可以实现前端数据排序,但是如果存在分页的情况,就只能排序展示页的内容,无法所有数据排序。(若统计数据类不存在分页(只有几十条数据那种),则可以使用前端排序)

三、后端排序

需要联动接口进行排序则需要对前端进行改造,同时后端接口也需要调整。

前端需要在想要排序的字段上新增sortable="custom",同时table中新增sort-change事件 ,@sort-change="sortChange()",在sortChange方法中调用后端接口,同时新增两个入参:prop和order,下面是示例代码:(我命名的参数是orderProp和orderBy,传入参数命名随意只需要与接口开发人员规定好即可)


  
  
dataListSortChange(column){
  console.info(column+"--"+column.prop+"--"+column.order)
  Object.assign(
	this.dataForm,
	{
	  'orderProp': column.prop,
	  'orderBy': column.order
	}
  )
  this.getDataList()
}

上述console.info打印出来的结果是:[object Object]--name--descending

调用接口时后端就会接收到排序字段,prop就是对应的上述name(名称),order则是ascending和descending(正序还是倒序),后端根据参数和排序顺序进行编写sql语句即可。

你可能感兴趣的:(Cx前端精品专区,vue,table,排序)