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));
},

 

posted @ 2021-10-19 15:10  醒日是归时  阅读(369)  评论(0编辑  收藏  举报