zoukankan      html  css  js  c++  java
  • 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));
    },
  • 相关阅读:
    Mysql 用户管理
    php插件名称 yum安装
    U盘模式无法引导进入pe系统
    修改 ssh 远程连接 时间
    tomcat 安装在 linux
    tomcat 配置文件 server.xml
    Linux 安装 jdk
    高可用web架构: LVS+keepalived+nginx+apache+php+eaccelerator(+nfs可选 可不选)
    Keepalived 工作原理和配置说明
    Mysql 初始化 及 密码管理
  • 原文地址:https://www.cnblogs.com/cherylgi/p/15424799.html
Copyright © 2011-2022 走看看