element ui table表格属性排序问题sort-change

element ui 中的table有很多功能，最近需要做一个排序的功能。
如下：

点击 ID右侧 或者 商品名称右侧的 上下箭头时，可以实现对应属性的排序。

查找element ui 官方文档发现有此功能：

表格的排序功能：

需要用到的属性有：sortable，这个属性需要在el-table-column中写入，并且有配套的prop
监听排序则需要在table中监听sort-change方法。

代码奉上：

//此处的Key不确定是干啥的~
 <el-table :key="tableKey"  
 //v-loading是用于显示表格中是否在数据请求时显示正在加载中，一般是数据请求时显示，数据请求后不显示
 v-loading="listLoading" 
 //data是表格中的数据
 :data="list" 
 //表格的高度
 :height="screenHeight" 
 //监听属性排序的方法
 @sort-change="sortChange"
 //表格中数据加载时，显示的文字可以进行自定义
      element-loading-text="正在努力加载中..." 
      //表格的边框
      border 
      //表格中宽度是否自动撑开
      fit 
      //表格中的当前行是否高亮显示
      highlight-current-row 
      //表格显示css样式，比如设置宽度
      style="width: 100%">
      //此列为序号，label标签 type是自定义的序号为Index,align是居中/靠左/靠右,show-overflow-tooltip是指：当内容过长被隐藏是显示tooltip，width就是设置宽度
      <el-table-column 
      label="序号" 
      type="index" 
      align="center" 
      show-overflow-tooltip 
      width="50">
      </el-table-column>
      //此列中的sortable prop都是为了属性排序    
      <el-table-column :label="'ID'" align="center" width="164px" :sortable="'custom'" prop="ID">
        <template slot-scope="scope">
          <span>{
     {
      scope.row.id }}</span>
        </template>
      </el-table-column>
</el-table>


//上方代码中的height,也就是表格的高度是通过页面自动计算出来的，在data中有说明。
data(){
     
	return{
     
		screenHeight: `${
       document.documentElement.clientHeight}` - 242,
	}
}



//以下代码放在methods中
sortChange(column) {
     
	//打印看看参数有哪些？
 	console.log('排序', column.prop, column.order);
 	//排序默认是从第一页开始
	  this.listQuery.page = 1;
	  //排序的字段是属性名
	  this.listQuery.param.sort = column.prop;
	  //排序的方式是根据上下选择来确定
	  this.listQuery.param.asc = (column.order == 'ascending' ? true : false);
	  //此方法为获取数据的方法
	  this.getPage();
},
getPage() {
     
	//表格加载中~
  this.listLoading = true;
  //调用Page接口，传递参数，
  page(this.listQuery).then(response => {
     
    this.list = response.result.data;
    this.total = response.result.total;
    //隐藏加载中~
    this.listLoading = false;
  });
}

表格table中属性排序，可以前台排序，也可以后台排序

如果需要前台排序，可以将sortable设置为true,或者直接写sortable即可。但是前台排序仅适用于当前页，如果翻页是没有当前排序效果的。

如果需要后台排序，可以将sortable设置为custom，然后配合table中的sort-change方法进行调用获取数据的方法来处理。