1. 程式人生 > 其它 >Element UI 表格排序所有頁

Element UI 表格排序所有頁

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' && typeof
value2 === '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));
},