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));
},
Element UI 表格排序所有页的更多相关文章
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- element UI表格行高、padding等设置报错问题
element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl (表 ...
- element ui表格常用功能如:导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求
<template> <div class="table-cooperte"> <el-table :data="tableData&quo ...
- element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- element ui表格表头顺序错乱的问题
因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...
随机推荐
- 使用命令行 Windows 修改文件权限
修改文件访问权限的命令行工具是 icacls,其使用语法是这样的: icacls <file> # 查看文件的访问权限 icacls <file> /grant <SID ...
- CSS & JS Effect – Virtual Scrolling
前言 我正在写 Angular CDK Scrolling 教程,它里面有一个 Virtual Scrolling 功能.借此机会,我想顺便写一篇纯 Sass & TS 的版本作为学习. Vi ...
- SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24
无数据知识蒸馏能够利用大型教师网络所学到的知识,来增强较小型学生网络的训练,而无需访问原始训练数据,从而避免在实际应用中的隐私.安全和专有风险.在这方面的研究中,现有的方法通常遵循一种反演蒸馏的范式, ...
- vivo 全链路多版本开发测试环境落地实践
作者:来自 vivo 互联网研发效能团队- Wang Kang 测试环境全链路多版本部署,解决多测试环境资源争抢等问题. 一.背景介绍 软件系统中全链路指的是从用户请求发起,到最终返回响应的整个过程中 ...
- vscode废掉了,跳转不到函数定义,无法自动补全,重装也没用的解决办法
1. 先卸载掉所有已安装的插件 2. 卸载vscode 3. 删除个人配置和插件配置,涉及两个文件夹 4. 需要安装C/C++组件,下载对应的vsix文件 下载地址: https://github.c ...
- C# 中的数组使用
· // 数组 /// 数组是一组相同类型的数据(ps:js中的数组可以不同类型) 访问通过索引访问数组元素 /// 数组的声明 要使用 new 使用 {} 来初始化数组元素 还需要指定数组的大小 / ...
- DDD之领域服务与应用服务
领域服务: 聚合中的实体没有业务逻辑代码,只有对象的创建,对象的初始化,状态管理等个体相关的代码: 对于聚合内的业务逻辑,我们编写领域服务Domain service 而对于聚合协作以及聚合与外部系统 ...
- 如何在kubernetes环境中共享GPU
随着人工智能和大模型的快速发展,云上GPU资源共享变得必要,因为它可以降低硬件成本,提升资源利用效率,并满足模型训练和推理对大规模并行计算的需求. 在kubernetes内置的资源调度功能中,GPU调 ...
- Nuxt.js 应用中的 restart 事件钩子详解
title: Nuxt.js 应用中的 restart 事件钩子详解 date: 2024/10/14 updated: 2024/10/14 author: cmdragon excerpt: re ...
- Linux查看CPU核数
**方法一:通过proc文件系统 获取cpu总数量 命令如下 ** cat /proc/cpuinfo |grep processor 方法二:nproc命令 nproc 方法三:lscpu 显示CP ...