vxe Table 复选框分页数据记忆选中问题

最新推荐文章于 2024-07-10 14:11:29 发布
最新推荐文章于 2024-07-10 14:11:29 发布
阅读量3.4k 收藏 8
点赞数 2
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web220507/article/details/125530352
版权
本文介绍了vxe Table组件在实现复选框选中并保持分页数据记忆的配置方法，包括设置`isCurrent`和`keyField`属性来标记当前行和设置`checkbox-config`以保留选中状态。通过`reserve`选项，即使数据刷新，也能保持之前选中的行。
摘要由CSDN通过智能技术生成

版本

3.5.0 版本及以上

必要配置

row-config=“{ isCurrent: true, keyField: ‘id’ }”

  • isCurrent：当前行是否高亮
  • keyField：自定义行数据唯一主键的字段名（默认自动生成）相当于row-id

checkbox-config=“{ checkRowKeys: selectRowsId, reserve: true }”

  • checkRowKeys:默认勾选指定行（只会在初始化时被触发一次，需要有 row-id）
  • reserve：是否保留勾选状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（需要有 row-id）

参考文档

效果

image.png

最低0.47元/天 解锁文章
web老猴子
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vxe-table 跨页勾选,可回显
jyf_568的博客
05-06 754
<vxe-table ref="table" v-loading="listLoading" :data="tableData" border stripe :height="tableHeight" show-footer :footer-method="footerMethod" ...
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
vue2版本的vxe-table选择框默认选中
front_xiaoyang的博客
07-10 714
vxe表格默认选中
vxeTable 复选框分页数据记忆选中问题
前端你鹏哥的博客
06-30 1770
配置checkbox-config的reserve和checkRowKeys属性，checkRowKeys的值为selectionRows，用于盛放我们要选中的数据id。写到这里我们已经成功了一大部分了，但是还没达到我们想要的效果，最重要的是最后一步，就是在分页事件中给我们已经选中的数据添加选中状态。这样我们就实现了vxeTable表格翻页后记忆选中行功能了。着重介绍一下selectChangeEvent事件。上面的方法写到翻页的查询逻辑中。先介绍一下表格的配置。
Vue中的vxe-table教程2-在线运行
weixin_42289273的博客
01-07 2610
脱离Vue项目环境和Vue服务器，直接CDN导入文件，在线运行。 注意：vue、xe-utils、vxe-table必须在开头就导入，而我们自定义的main.js需要放在最后导入，这样才能把数据加载到页面，而main.css在开头或最后导入均可。 1. html中的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&l
使用ElementUI的el-tab+vxe-table表格+复选框选择
这个Bug怎么解啊？
01-13 1800
使用ElementUI的el-tab+vxe-table表格+复选框选择，复选框跨el-tab的每一栏选择并能回显，思路比较简单，代码较多，仅供大家参考，有更好的办法我会再更新的
vxe-tale 复选框--分页选择及回显
weixin_44705310的博客
07-18 2305
vxe-tale 复选框--分页选择及回显
vue el-table默认选中
生而为人我很抱歉
03-08 757
** 多选框选中数据 */
Vue3 vxe-table 手写鼠标区域选中
weixin_45366616的博客
10-10 2857
手写vxe-table pro收费版本鼠标选择功能
Vue中使用vxe-table组件分页查询，多页选择数据回显，分页记录保存选中的数据
12-12 4764
当表格中需要渲染的数据量比较大，有几万几十万条数据时，在前端分页将会非常慢，建议将当前页码和每页数量传递个后端，后端分好后给前端渲染。获取当前页以外选中的行数据：调用 this.$refs.ref_table_task.获取当前页选中的行数据：调用 this.$refs.ref_table_task.注意：经测试，每页最多选中500行左右，否则在切换回选中的页时会非常卡。后端除了返回要显示的页数据外，通常还要传递总数量total。对于多页选择，需要指定。
vxe复选框分页勾选的处理
chy的博客
10-20 2890
vxe复选框分页勾选的处理
Vxe-table使用技巧总结
hoaxxcj的博客
06-01 1万+
最近项目中需要用到多层树table+checkbox勾选功能，选了一些组件，最终决定使用vxe-table。Vxe-table功能丰富、api也多。官方例子很多比较粗浅，我花了很多精力才弄通了一些功能点及细节。在此汇总给大伙铺铺路。
vxe-table 表格多选框回显
wwf1225的博客
02-27 4759
* 能力素质要求
vxe-table表格新增节点
zhurenjin的博客
06-14 328
做前端的朋友可以参考下：也可结合实际需求查看相应的官方文档。
vxe-table 将表格指定行设置背景颜色后，选中行、悬浮行样式失效解决。
是秃子总会发光
08-30 8092
vxe-table 根据表格数据，将符合条件的行设置颜色；设置颜色后，选中行、悬浮行样式失效解决。
vue最强table vxe-table 虚拟滚动列表 前端导出
jmszl1991的博客
07-06 1万+
vue table万能组件
vxe-table使用（第一节）
热门推荐
who_become_gods的博客
04-26 2万+
vxe-table 一个全功能的 Vue 表格，满足绝大部分对 Table 的一切需求，与任意组件库完美兼容 因为公司项目需求,需要跟大数据还有表格汇总打交道，刚开始用的是组件element-ui，随着项目需求的增加，element-ui无法满足我所需要的，这个时候 vxe-table 进入了我的视线，接触了之后才发现他的功能是真的强大。 基础类型（大概的属性跟性能） 1、表格的边框（有三种形式...
vxe table： 实现tree表格，并且自定义展示指定行
小先生编程
08-11 2042
在这里插入图片描述](https://img-blog.csdnimg.cn/69114d516ada46f188f33961ba417995.png。展开所有，我们需要将数据的树形结构转换为Array结构，Array结构是没有children 属性的。数据为Array类型时会生效。为树型结构时不会生效，看5的解决方案。展开多行，需要将多行放入同一个数组中。展开指定的行，需要将行放到数组中。展开所有第一层节点。
vxe-table 复选框选中后全选框会消失
最新发布
08-22
关于复选框选中后全选框消失的问题，这通常是因为 `vxe-table` 默认设计中，当用户开始手动选择行时，全选状态会被禁用，以便更好地控制单独的选择。 当你需要保持全选状态直到所有行都被选中，可以在配置选项中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值