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

一、 概述

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

二、前端排序

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

三、后端排序

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

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

<el-table
	:data="dataList"
	v-loading="dataListLoading"
	@sort-change="sortChange"
	key="dataListTb"
>
  <el-table-column
	prop="name"
	label="名称"
	align="center"
	sortable="custom"
  >
  </el-table-column>
</el-table>

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语句即可。