Vue中使用vxe-table组件分页查询,多页选择数据回显,分页记录保存选中的数据

news2025/1/11 21:59:02

官方示例:vxe-table v3https://vxetable.cn/v3/#/table/advanced/page

 当表格中需要渲染的数据量比较大,有几万几十万条数据时,在前端分页将会非常慢,建议将当前页码和每页数量传递个后端,后端分好后给前端渲染。

后端查询SQL时,通过limit 和offset 查询分页:

sql += ` limit ${pageSize} offset ${pageSize * (currentPage - 1)} `

后端除了返回要显示的页数据外,通常还要传递总数量total:

router.get('/', async (ctx, next) => {
  let { task_info, state, currentPage, pageSize, check_host_name_alias, need_update_tile, priority, check_progress, download_progress, downloadfialdcount, check_faild_count } = ctx.request.query
  let sql = `select * from (
SELECT
   SUBSTRING (task_info, 1, 11) as task_info_substring,
	( SELECT NAME FROM downloaduser WHERE machine_code = T.check_host_name ) AS "check_host_name_alias",
	( SELECT NAME FROM downloaduser WHERE machine_code = T.download_host_name ) AS "download_host_name_alias",
	( CASE T.STATE WHEN 1 THEN now( ) - T.check_start_time ELSE T.check_end_time - T.check_start_time END ) AS "check_use_time",
	( CASE T.STATE WHEN 4 THEN now( ) - T.download_start_time ELSE T.download_end_time - T.check_start_time END ) AS "download_use_time",
	* 
FROM
	task T ) t2 where 1=1`
  if (task_info) {
    // console.log("task_info:", task_info)
    let task_info_arr = task_info.split("\n")


    sql += ` and t2.task_info_substring in (${format_arr_to_str(task_info_arr)})`
  }
  if (state) {
    sql += ` and state = ${state}`
  }
  if (need_update_tile) {
    sql += ` and need_update_tile  like '%${need_update_tile}%'`
  }

  // sql += ' order by task_info asc'
  // 多字段排序
  // if (priority) {
  //   sql += ` ,priority ${priority}`
  // }

  if (priority) {
    sql += ` order by priority ${priority}`
  }
  let data_count = await db.query(`select count(*) from (${sql}) t_temp`);//满足条件的记录总数
  let total = parseInt(data_count.rows[0].count)

  sql += ` limit ${pageSize} offset ${pageSize * (currentPage - 1)} `
  // console.log("sql:", sql)
  let data = await db.query(sql);
  ctx.body = {
    code: 0,
    message: "success",
    data: { ...data, total }
  }
})

注意:这里查询总数量时,是用的`select count(*) from (${sql}) t_temp` ,这样查询速度比较快。如果全表查询,再返回查出的rows.length,这样速度会很慢 

对于多页选择,需要指定row-id=“主键字段”:checkbox-config="{ reserve: true }"

获取当前页选中的行数据:调用 this.$refs.ref_table_task.getCheckboxRecords()

获取当前页以外选中的行数据:调用 this.$refs.ref_table_task.getCheckboxReserveRecords()

注意:经测试,每页最多选中500行左右,否则在切换回选中的页时会非常卡 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/82671.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电脑重装小白系统没内存怎该如何解决

很多网友想要重装系统,但是在用小白系统安装的时候提示没内存怎么办呢?我们可以卸载自己的电脑软件,或者是扩充一下自己电脑内存。不知道如何处理相关问题的小伙伴可以直接看看下面小编分享的文章小白系统没内存怎么办。 工具/原料: 系统版…

MySQL主从复制-----读写分离

MySQL主从复制是一个异步的复制过程,底层是基于Mysql数据库自带的二进制日志功能。就是一台或多台Mysql数据库(slave从库)从另一台mysql数据库(master,主库)进行日志的复制然后再解析日志并应用到自身,最终…

nacos--基础--2.5--部署--集群--传统

nacos–基础–2.5–部署–集群–传统 前提 使用hd用户登陆 完成基础环境搭建https://blog.csdn.net/zhou920786312/article/details/1182123021、机器 IP端口备注192.168.187.1718848xx192.168.187.1728848xx192.168.187.1738848xx 2、tar.gz安装 2.1、安装 参考 nacos–基…

javaee之黑马旅游网4

下面来做旅游线路的查询功能 1.查询参数传递 在header.html 我们先找到这部分的位置 上面就加了两个id 引入这个js文件 控制搜索框 那我们现在来说一下,cid怎么来获取,换句话说cid是从什么地方传过来的? 首先header.html页面是被包含在r…

人力资源杂志人力资源杂志社人力资源编辑部2022年第20期目录

专题研究《人力资源》投稿:cnqikantg126.com 破解高端人才引聚难 林翠玲; 1-3 如何凸显集团企业人力资源管理价值 刘鹏飞; 4-5 中长期激励,激活科研人员创新力 刘灿;汪思源; 6-7 改革人才评价体系,助推“双一流”建设 杨帆; …

STM32CUBEMX_配置stm32f103c8t6的bootloader_USB升级

STM32CUBEMX_配置stm32f103c8t6的bootloader_USB升级 1、使用stm32cubemx配置好工程(版本6.3.0),生成keil工程 2、移植必须要的一些函数 3、使用dfusedemo工具软件测试 ①配时钟外设 ②配ST-Link调试接口(防止无法二次烧录程序&a…

理解Python的协程(Coroutine)

生成器(Generator) yield表达式的使用生产者和消费者模型yield from表达式协程(Coroutine) asyncio.coroutineasync/await总结参考链接 由于GIL的存在,导致Python多线程性能甚至比单线程更糟。 GIL: 全局解释器锁(英语:Global Interpreter Lo…

InvocationException: GraphViz‘s executables not found【BUG已解决】

项目场景: 在机器学习框架中遇到了一个bug:安装了GraphViz模块后,在对着sklearn的决策树文档操作输出决策树模型结果时,还是爆出了如下的错误: 报错位置为: display(Image(graph.create_png())) graph.wr…

艾美捷低内毒素CpG ODN寡聚脱氧核苷酸全家族系列

免疫佐剂,是一类可以增强抗原免疫原性的免疫调节分子、化合物或大分子复合物。大多数佐剂可以通过启动先天免疫系统来辅助抗原应答。先天免疫系统通过模式识别受体(pattern recognition receptor,PRR)来感知各种微生物表达的病原体…

SQL通用语法及分类

目录 MySQL的启动和连接&数据模型 SQL通用语法及分类 Data Definition Language DDL - 数据库操作 DDL - 表操作 表操作 - 创建&&查询 表操作 - 数据类型 表操作-修改&&删除 DDL总结 Data Manipulation Language DML - 插入数据insert DML - 更…

高佣金流量卡上线

01 流量卡业务 常规的运营商套餐相对都比较贵,少则六七十一个月,多则几百块一个月,这样的套餐让运营商赚盆满钵满。 随着5G需求越来越多,其他第三方运营商也开始市场化营销,流量卡的CPA基本在60-200之间一张卡&…

汽车喷漆车间风淋室八大参数TENAISU

汽车喷漆车间风淋室风淋室配置八大参数 汽车喷漆车间风淋室及汽车涂装车间风淋室配置八大参数,光电感应自动功能系统、自动身份识别功能系统、自动臭氧杀菌功能系统、自动紫外线杀菌功能系统、自动除静电离子发生功能系统、可调延时开门功能系统、过滤器失效预警功能系统、自动…

焦脱镁叶绿酸-a修饰无机纳米材料/活性基团/上转换纳米发光颗粒/点击化学/抗体的应用

小编今天分享的科研知识是焦脱镁叶绿酸-a修饰无机纳米材料/活性基团/上转换纳米发光颗粒/点击化学/抗体的应用,一起来看! 焦脱镁叶绿酸-a衍生物的应用: 叶绿素降解产物是合成光动力治疗药物的理想合成前体.为了获得新型叶绿素类光敏剂,以焦脱…

Vscode踩坑日记--行尾序列LF和CRLF

Vscode踩坑日记–行尾序列LF和CRLF 今天一上午什么也没干,一直配置Vscode,之前因为代码提交问题,需要解决配置一下eslint,问题就来了。 插件,配置信息什么都写好了还是一堆错误??让我很懵逼 …

基于Java Springboot-MySQL实现学生信息成绩管理系统

学生成绩管理系统 项目设计的意义。 该系统的具体任务就是设计一个学生成绩的数据库管理系统,由计算机代替人工执行一系列诸如增加新学生成绩信息、删除学生成绩信息、学生资料、查询、修改等的处理操作,以方便管理人员的管理信息工作。本设计以学生成绩…

32种EMC标准电路 (共用)

01 AC24V接口EMC设计标准电路 02 AC110V-220VEMC设计标准电路 03 AC380V接口EMC设计标准电路 04 AV接口EMC设计标准电路 05 CAN接口EMC设计标准电路 06 DC12V接口EMC设计标准电路 07 DC24V接口EMC设计标准电路 08 DC48接口EMC设计标准电路 09 DC110V接口…

[附源码]Python计算机毕业设计SSM基于大数据的高校国有固定资产管理及绩效自动评价系统(程序+LW)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

vivado tcl开发流程

本文以简单的led灯为例,阐述基于tcl的Vivado开发流程。 文件内容编写如下: led.v timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2022/12/12 14:57:22 // Design Name: // Module Name: alu // Project Name: // Target De…

这10种神级性能优化手段,你用过几个?

引言:取与舍 软件设计开发某种意义上是“取”与“舍”的艺术。 关于性能方面,就像建筑设计成抗震9度需要额外的成本一样,高性能软件系统也意味着更高的实现成本,有时候与其他质量属性甚至会冲突,比如安全性、可扩展性…

React源码分析8-状态更新的优先级机制

这是我的剖析 React 源码的第二篇文章,如果你没有阅读过之前的文章,请务必先阅读一下 第一篇文章 中提到的一些注意事项,能帮助你更好地阅读源码。 文章相关资料 React 16.8.6 源码中文注释,这个链接是文章的核心,文…