To query a function record, you can click a column to sort it, using the a-tabel component in ant. First create a new table and declare the change event in the table.
<a-table
ref="table"
:alert="true"
:columns="columns"
:data-source="data"
@change="handleChange"
:scroll="{y: 500}"
size="default"
></table>
The columns are declared in the computed function:
computed: {
columns() {
let {
sortedInfo, filteredInfo } = this
sortedInfo = sortedInfo || {
}
filteredInfo = filteredInfo || {
}
const columns = [
{
title: '金额',
dataIndex: 'settlementAmount',
customRender: text => moneyFormat(text),
filteredValue: filteredInfo.settlementAmount || null,
onFilter: (value, record) => record.settlementAmount.includes(value),
sorter: (a, b) => a.settlementAmount.length - b.settlementAmount.length,
sortOrder: sortedInfo.columnKey === 'settlementAmount' && sortedInfo.order,
ellipsis: true
}...
]
return columns
}
}
Pagination is involved here, so every time I sort, I will call the API to get the data again. If only the current page is sorted, there is no need to call.
handleChange(pagination, filters, sorter) {
console.log('Various parameters', pagination, filters, sorter)
this.filteredInfo = filters
this.sortedInfo = sorter
if (sorter.order) {
this.queryParam.orderByColumn = sorter.columnKey
this.queryParam.isAsc = sorter.order === 'ascend' ? 'asc' : 'desc'
}
//调用后台api...
},
Ascend means ascending order, descend means descending order