Element UI 表格排序所有頁
阿新 • • 發佈:2021-10-19
Element UI 表格排序只排了當前頁,解決方案如下:
定義方法:
/** 比較 * @param {string} propertyName 屬性值 * @param {string} sort 當前順序 * @returns {Object} */ export function compare(propertyName, sort) { return function (obj1, obj2) { var value1 = obj1[propertyName] var value2 = obj2[propertyName] if (typeof value1 === 'string' && typeofvalue2 === 'string') { const res = value1.localeCompare(value2, 'zh') return sort === 'ascending' ? res : -res } else { if (value1 <= value2) { return sort === 'ascending' ? -1 : 1 } else if (value1 > value2) { return sort === 'ascending' ? 1 : -1 } } } }
vue
<el-table class="mytable" v-loading="tableLoading" ref="myTable" :data="blist | dataslice(listQuery.page, listQuery.limit)" element-loading-text="拼命載入中......" empty-text="沒有找到匹配的記錄" border fit highlight-current-row @sort-change="sortChange" > <el-table-column align="center" label="版本" prop="version" sortable="custom"/> <el-table-column align="center" label="批次" prop="batchid" sortable="custom"/> <el-table-column align="center" label="修改使用者" prop="updator" sortable="custom"/> <el-table-column align="center" label="狀態" prop="status" sortable="custom"/> </el-table>
sortChange({column, prop, order}) { this.blist.sort(compare(prop, order)); },