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版权协议,转载请附上原文出处链接和本声明。