elementui的table自定义排序,接口排序等等

elementui自定义排序,接口排序, 先看规则:
在这里插入图片描述

<el-table
  :data="tableData"
  style="width: 100%"
  <!-- 数据由后台进行排序时sortable="custom",需要监听排序点击事件,会返回当前的prop和order -->
  @sort-change="changeSort"
  <!-- default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序 -->
  :default-sort="{prop: 'date', order: 'ascending'}"
  border>
 <el-table-column
    prop="name"
    label="姓名"
    <!-- sort-by指定数据按哪个属性进行排序,如果不指定,就是按这里的prop值排,指定一个时写成字符串形式:sort-by="name",指定多个时,使用数组.这里的效果就是,当姓名的值全部一样时,就按address进行排序 -->
    :sort-by="['name']"
    sortable
    width="180">
  </el-table-column>
//排序的方法	每次排序会触发
changeSort(val){
	console.log(val) // column: {…} order: "ascending" prop: "date"
    // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数 , 然后请求数据, 重新渲染页面即可.
}

版权声明:本文为weixin_43871703原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。