ant-design-vue的table组件后端排序table组件后端排序
在使⽤ant-design-vue的表格组件的时候，当数据量过⼤时，就需要点击相应的列，调⽤后端接⼝排序
后端排序步骤：
在<Table></Table>组件中开启 :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 = lumnKey === 'applyTime' && der,
item.sorter= true
}
if(item.key =="activeTime"){
item.sortOrder = lumnKey === 'activeTime' && der,
item.sorter= true
}
if(item.key =="createTime"){
item.sortOrder = lumnKey === 'createTime' && der,
item.sorter= true
}
return item
}).filter((item)=>{
return item.itemIsChecked === true || item.hiddenCol==true
})
},
为表格设置相应的列排序事件
<Table  :columns="checkedToshowHeader" :data-source="tableData" ref="table"
:
scroll="(checkedToshowHeader.length>=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 (der) {
this.sort = der === 'ascend' ? 'asc' : 'desc'
} else {
this.sort = ''
}
if (pagination.pageSize !== dition.pageSize) {
// this.currentPage = 1
// this.pageSize = pagination.pageSize
this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:1})
} else {antdesignvuetable动态表头
// this.currentPage = pagination.current
// this.pageSize = pagination.pageSize
this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:pagination.current})
}
this.updateSelectCondition({
sortName: der,
sortOrder: this.sort
})
this.update()
},
sorter.field 中则是排序字段

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。