ant-design-vue的table组件后端排序
table组件后端排序
在使⽤ant-design-vue的表格组件的时候，当数据量过⼤时，就需要点击相应的列，调⽤后端接⼝排序后端排序步骤：
在
组件中开启 :sortDirections=\"['descend', 'ascend']\"在计算属性中对表格数据的表头columns，设置相应的字段
// 勾选则显⽰表头
checkedToshowHeader() {
// return this.customHeaderData.filter((item) => {
// return item.itemIsChecked === true || item.hiddenCol==true // });
let { sortedInfo } = this
sortedInfo = sortedInfo || {}
return this.customHeaderData.map(item=>{ //
if(item.key ==\"applyTime\"){
item.sortOrder = sortedInfo.columnKey === 'applyTime' && sortedInfo.order, item.sorter= true }
if(item.key ==\"activeTime\"){
item.sortOrder = sortedInfo.columnKey === 'activeTime' && sortedInfo.order, item.sorter= true }
if(item.key ==\"createTime\"){
item.sortOrder = sortedInfo.columnKey === 'createTime' && sortedInfo.order, item.sorter= true }
return item
}).filter((item)=>{
return item.itemIsChecked === true || item.hiddenCol==true }) },
为表格设置相应的列排序事件
=8)?{ x: 1500 }:{x:false}\" :loading=\"loading\":sortDirections=\"['descend', 'ascend']\" :rowKey=\"(record, index) => index\" xScrollPlacement=\"tableBottom\" :pagination=\"pageOpt\" @change=\"onChangeSort\" >
在对应事件中开启排序
onChangeSort (pagination, filters, sorter) {
console.log('%c pagination: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', pagination); this.sortedInfo = sorter if (sorter.order) {
this.order = sorter.field || 'createTime'
this.sort = sorter.order === 'ascend' ? 'asc' : 'desc' } else {
this.order = '' this.sort = '' }
if (pagination.pageSize !== this.condition.pageSize) { // this.currentPage = 1
// this.pageSize = pagination.pageSize
this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:1}) } else {
// this.currentPage = pagination.current // this.pageSize = pagination.pageSize
this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:pagination.current}) }
this.updateSelectCondition({ sortName: this.order, sortOrder: this.sort })
this.update() },
sorter.order中则是升序或者降序sorter.field 中则是排序字段