【猛地学】vxe-table(支持大数据量的可编辑vue表格插件)

25 篇文章 0 订阅

vxe-table(支持大数据量的可编辑表格插件)

因为公司有数据量大的表格,看了一下解决方案,发现了一个好的table插件

官方文档

VXE Table 是一个基于Vue的表格框架,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

VXE Table面向现代浏览器,高效的简洁 API 设计,模块化表格、按需加载、扩展接口,为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能。

功能及特点
  • 基础表格
  • 高级表格
  • 斑马线条纹
  • 多种边框
  • 单元格样式
  • 列宽拖动
  • 最大高度
  • 自适应宽高
  • 固定列
  • 多级表头
  • 表尾数据
  • 高亮行或列
  • 序号
  • 单选框
  • 复选框
  • 下拉选项
  • 开关
  • 排序
  • 筛选
  • 合并单元格
  • 合并表尾
  • 导入/导出/打印
  • 显示/隐藏列
  • 加载中
  • 格式化内容
  • 自定义插槽 - 模板
  • 快捷菜单
  • 展开行
  • 分页
  • 表单
  • 工具栏
  • 下拉容器
  • 虚拟列表
  • 增删改查
  • 树表格
  • 数据校验
  • 数据代理
  • 键盘导航
  • 模态窗口
  • 渲染器
  • 虚拟滚动
  • 虚拟合并
  • (pro) 单元格区域选取
  • (pro) 单元格复制/粘贴
  • (pro) 单元格查找和替换
优势:最大的优势是表格可编辑
其他:

1,图标多样

2,表格类型多

3,支持大数据量加载,例如实现下拉框虚拟列表、海量数据列表…等等,对性能大幅提升,滚动流畅(理论上最大可以支持 60w 行)

参考:https://blog.csdn.net/xlz26296/article/details/106732633/

4,支持层级关系复杂数据处理(树结构)

5,多功能表格 编辑、实时保存、自定义打印、导出csv、导出xlsx(导出打印这块还没有实际操作过) 参考: https://blog.csdn.net/qq_40413396/article/details/124998869

官网描述的功能:参考https://vxetable.cn/v3/#/table/start/install

基础表格、高级表格、斑马线条纹、多种边框、单元格样式、列宽拖动、最大高度、自适应宽高、

固定列、多级表头、表尾数据、高亮行、列、序号、单选框、复选框、下拉选项、开关、排序、筛选、

合并行或列、导入、导出、打印、显示/隐藏列、加载中、格式化内容、自定义插槽/模板、快捷菜单、展开行、

分页、表单、工具栏、下拉容器、虚拟列表、增删改查、树表格、数据校验、数据代理、键盘导航、模态窗口、渲染器、虚拟滚动

我遇到过的坑点:1、全局的size修改以及一些基础的样式不是很友好

参考:https://blog.csdn.net/m0_38085253/article/details/124865828

2、参数绑定,数据刷新,单元格合并加载数据会出现些小漏洞

3、插件的说明书有些地方写的不是很好,有些地方需要自己研究

4、表单校验不好使

网上提出的个别缺点:

1,启用虚拟滚动后 show-overflow,show-header-overflow,show-footer-overflow 参数将根据渲染规则各自触发生效,无法取消;所有单元格比较同等高度,不能用于自适应高度;,

2.不支持展开行以及任何更改单元格高度的方式

3,横向虚拟滚动不支持分组表头,

4,当渲染复杂固定列时,同步滚动会有延迟,具体由渲染的复杂度决定

5.按钮导入导出,样式错乱,导出pdf报错等其他问题

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vxe-table是一个基于vue表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向现代浏览器,高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能 功能: Basic table (基础表格) Grid (高级表格) Size (尺寸) Striped (斑马线条纹) Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table head (表头分组) Highlight row and column (高亮行、列) Table sequence (序号) Radio (单选) Checkbox (多选) Sorting (排序) Filter (筛选) Rowspan and colspan (合并行或列) Footer summary (表尾合计) Import (导入) Export (导出) Print (打印) Show/Hide column (显示/隐藏列) Loading (加载中) Formatted content (格式化内容) Custom template (自定义模板) Context menu(快捷菜单) Virtual Scroller(虚拟滚动) Expandable row (展开行) Pager(分页) Form(表单) Toolbar(工具栏) Tree table (树形表格) Editable CRUD(增删改查) Validate(数据校验) Data Proxy(数据代理) Keyboard navigation(键盘导航) Modal window(模态窗口) Charts(图表工具) 更新日志: v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值