Vue Element-ui Table表格排序-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue Element-ui Table表格排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.表格中有时候会有排序的需求，如果只针对当前页进行排序，那么前端就可以实现排序，在对应需要排序的字段中，使用sortable字段即可。

    <el-table-column
      prop="date"
      label="日期"
      width="180"
      sortable    //在需要排序的字段中，添加sortable，就可以在前端实现当前页中的排序
      :default-sort="{prop: 'date', order: 'ascending'}"  //default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序。这个语句根据自己的需求可要可不要。
      >  
    </el-table-column>

二.存在分页的情况时，前端仅仅使用sortable当前页排序已经不能满足我们的需求，无法对所有数据进行排序。这时候我们就要使用后端排序。

给el-table设置事件@sort-change=“onSortChange”

<el-table
 	:data="dataList" 
 	border
     style="width: 100%
     height="calc(100vh - 250px)" 
     @sort-change="onSortChange">  //onSortChange为排序发生改变时调用的方法
</el-table>

给需要排序的表格设置属性sortable=“custom”

<el-table-column 
   	label="操作时间" 
   	prop="opTime" 
    sortable="custom"    //sortable="custom"表示使用的排序为后端排序
   	:sort-orders="['ascending', 'descending']"  // sort-orders接收一个数组,用来指定点击可排序表头时排列的顺序,
   	 >   									   //默认是['ascending', 'descending', null]点击时先升序ascending,再点击降序descending,再点击不排序null,
</el-table-column>							   //按表格的默认索引排.可以自己设置排列顺序 。
   											   //根据自己的需求可选择写不写这个语句，不写则默认是['ascending', 'descending', null]

声明 onSortChange()

    //点击时间排序
onSortChange(column){
     console.log("column____________",column);  //打印出传入的column，发现里面有3个数据
     this.listQuery.sortType= column.order === "ascending" ? 1 : column.order === "descending" ? 0 : ""      //将sortType设置为与后端约定的排序值，1为升序，0为降序，null为默认不排序
     this.getList()
   },

打印出传入的column，发现里面有3个数据，分别代表的意义是：
column：当前列；
order：排序的规则（升序ascending、降序descenting和默认的没有排序null）；
prop：表格中排序的字段名。
Vue Element-ui Table表格排序文章来源地址https://www.toymoban.com/news/detail-508039.html