要求:页面一进来返回的数据就按照更新时间倒序显示
如图:
table组件配置项
<a-table
row-key="id"
:columns="columns"
:data-source="dataTable"
:pagination="pagination"
:row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="tableChange"
>
data内部:
params: {
sort: ['updatedTime,desc']//表格请求的参数中的sort,传给后端
},
sortVisible: true,
pagination: {
switch: true,
...this.$config.defaultPage(),
showTotal: total => this.$t('page:total', { total }), // 分页中显示总的数据
onChange: pageNumber => {
const me = this;
me.sortVisible = false;//排序
me.pagination.current = pageNumber;
me.queryTable();
},
onShowSizeChange: (_current, pageSize) => {
const me = this;
me.sortVisible = false;//排序
me.pagination.pageSize = pageSize;
me.pagination.current = 1;
me.queryTable();
}
}
表格配置:
computed: {
columns() {
return [
...
{
title: () => <b>更新时间</b>,
key: 'updatedTime',
dataIndex: 'updatedTime',
sorter: true,//开启排序
width: '170px',
defaultSortOrder: 'descend',//小箭头标识默认是降序
ellipsis: true
},
...
]
}
}
methods里的表格change方法:
tableChange(_pagination, _filters, sorter) {
if (this.sortVisible) {
this.pagination.current = 1;
this.params.sort = [];
if (sorter.order) {
const order = sorter.order === 'ascend' ? 'asc' : 'desc';
this.params.sort.push(sorter.field + ',' + order);
}
this.queryTable();//表格请求函数
} else {
this.sortVisible = true;
}
},