前言:官方文档搜索sort-change
1.html :el-table监听 sort-change 方法,el-table-column设置 sortable="custom"
<el-table @sort-change="sortFn">
<el-table-column
sortable="custom"
prop="name"
label="名字"
align="center"
width="120">
<template slot-scope="scope">
<div>
{{ parseToThousandth(scope.row.name)}}
</div>
</template>
</el-table-column>
</el-table>
2.script :在methods里面编写自定函数 sortFn 逻辑,默认参数column中有order和prop,根据后端要求的传参数,返回数据直接赋值table
sortFn(column){ //table后端排序
console.log(column)
let order = '';
if(column.order ==="ascending"){
order = (column.order).substring(0,3)
}else if(column.order ==="descending"){
order = (column.order).substring(0,4)
}
let params = { orderBy:column.prop, order:order }
// console.log('params',params)
this.listLoading = true;
this.$axios.post('queryeList',params).then(res=>{
this.listLoading = false;
this.$emit('tableDataFromChild',[res.data,'hadSort']) //将数据给到父组件中去
}).catch(err=>{
console.log('err',err)
})
},
网友评论