資料庫中每個列名稱有欄位名為sortable為ture或者false來控制這個列是否需要排序，給有需要排序的列加上element-ui中的上下箭頭按鈕，并根據點擊的列去傳引數到后端，后端進行排序后回傳，
1.給table 組件添加自擬函式屬性
<el-table
:data="data"
border
style="width:100%"
v-loading="loading"
@select="handleSelect"
:header-cell-style="headerStyle"
:cell-style="cellStyle"
@sort-change='tableSortChange'
></table>
其中@sort-change='tableSortChange’為表格系結自定義排序函式
tabelSortChange
2.動態渲染表格，
<template v-for="(elem, index) in tableConfig.config.elements">
<el-table-column
v-if="elem.display"
:sortable="elem.sortable"
show-overflow-tooltip
:fixed="elem.fixed"
:key="index"
:prop="elem.key"
:label="elem.label || elem.key"
>
<template v-if="elem.sortable">
sortable="column"
</template>
</el-table-column>
</template>
結構為for-if-if結構，回圈資料庫中的表格的資料，這個渲染是從資料庫中拿列標簽以及對應的資料，第一個v-for 為回圈所有的項，第一個v-if為判斷當前欄位是否需要展示，展示則渲染，第二個v-i為判斷在展示的基礎上需不需要進行排序，是則渲染排序箭頭，
3.自定義的排序處理函式
tableSortChange(column) {
let orderby = column.prop;
let order = column.order;
var params = [{
orderby: orderby
}, {
order: order
}];
api
.queryPage({
pageId: this.pageId,
params,
pageNum: this.pageInfo.pageIndex,
pageSize: this.pageInfo.pageSize
})
.then(resp => {
this.loading = false
_this.dataList = resp.data.data.list
_this.pageInfo.totalSize = resp.data.data.total
})
},
呼叫AJAX的api將引數傳至后端，并從后端回傳排序好的資料，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255230.html
標籤：其他