自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(76)
  • 收藏
  • 关注

原创 vxe-table 树表格启用树节点连接线的使用

vxe-table 树表格启用树节点连接线的使用。

2025-04-01 14:23:27 771

原创 vue 中使用分割面板 vxe-split 来实现支持拖拽功能

vue 中使用分割面板 vxe-split 来实现支持拖拽功能。

2025-03-27 14:55:56 186

原创 vxe-table 给单元格添加自定义颜色状态,单元格加自定义样式

vxe-table 给单元格添加自定义颜色状态,单元格加自定义样式。

2025-03-26 11:16:50 532

原创 vxe-table 实现高亮行与高亮列,按键导航跟随光标移动

vxe-table 实现高亮行与高亮列,按键导航跟随光标移动查看官网:https://vxetable.cngitbub:https://github.com/x-extends/vxe-tablegitee:https://gitee.com/x-extends/vxe-table通过 rowConfig.isCurrent 启用高亮行功能,columnConfig.isCurrent 启用高亮列功能,mouseConfig 配置单元格选中功能,keyboardConfig 配置快捷键相关功能ht

2025-03-21 15:37:36 308

原创 解决 vxe-table 固定列对不齐,滚动后错位、展开行遮挡的问题,解决渲染空白、边框丢失问题

解决 vxe-table 固定列对不齐,滚动后错位、展开行遮挡的问题,解决渲染空白、边框丢失问题。解决方法,更新到最新版本就完美解决了;v4 版本更新到 v4.12+,v3版本更新到 v3.14+

2025-03-19 19:12:16 288

原创 使用 vxe-table 导出 excel,支持带数值、货币、图片等带格式导出

使用 vxe-table 导出 excel,支持带数值、货币、图片等带格式导出,通过官方自动的导出插件 plugin-export-xlsx 实现导出功能查看官网:https://vxetable.cngitbub:https://github.com/x-extends/vxe-tablegitee:https://gitee.com/x-extends/vxe-table效果https://gitee.com/x-extends/vxe-table

2025-03-06 08:15:00 1649

原创 使用 vxe-table 复选框启用 checkbox-config.reserve 跨页多选时,如何保留勾选状态,自动根据勾选来决定半选状态

使用 vxe-table 复选框启用 checkbox-config.reserve 跨页多选时,如何保留勾选状态,变为半选查看官网:https://vxetable.cngitbub:https://github.com/x-extends/vxe-tablegitee:https://gitee.com/x-extends/vxe-table未启用跨页状态显示时启用跨页状态显示时,当使用数据分页与复选框多页选中时,可以通过 checkbox-config.reserve 启用,将不会自动清除勾选数

2025-03-04 10:34:31 374

原创 vxe-table 如何使用树层级结构并开启虚拟滚动

vxe-table 如何使用树层级结构并开启虚拟滚动,默认情况下 vxe-table 是支持平级树结构开启虚拟滚动的,会自动转成树结构,但是有时候后端返回的数据是树层级,不是平级。这时候就可以用数据拍平方法实现。// 使用函数库工具类处理数据。

2025-03-03 11:34:23 1114

原创 如何在弹出窗中使用 vxe-table 详细使用的完整案例源码

如何在弹出窗中使用 vxe-table 详细使用的完整案例源码,包含弹窗、表格、分页、增删改查等功能集成使用。查看官网:https://vxetable.cngitbub:https://github.com/x-extends/vxe-tablegitee:https://gitee.com/x-extends/vxe-table使用更强大的 vxe-grid 来实现功能,包含弹窗、表格、分页、增删改查的案例详细教程,具体如下:https://gitee.com/x-extends/vxe-tabl

2025-02-28 08:15:00 851

原创 vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点

vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点比如用户自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。

2025-02-19 08:30:00 558

原创 如何使用 vxe-table grid 全配置式给单元格字段格式化内容,格式化下拉选项内容

如果使用 vxe-grid 全配置式给单元格字段格式化内容,格式化下拉选项内容公司的业务需求是自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。

2025-02-18 08:30:00 306

原创 解决 vxe-table 展开行与固定列遮挡问题

解决 vxe-table 展开行与固定列遮挡问题,需要更新到 v4.11+ 版本才支持该功能。

2025-02-14 08:30:00 1001

原创 vxe-table 使用树结构点击筛选,子节点筛选

vxe-table 使用树结构点击筛选,子节点筛选,启用树结构后会同时对每个层级的子节点进行筛选官网:https://vxetable.cn

2025-02-12 08:45:00 645

原创 vxe-table 使用树结构点击排序,子节点排序

vxe-table 使用树结构点击排序,子节点排序,启用树结构后会同时对每个层级的子节点进行排序。

2025-02-11 16:11:26 571

原创 vxe-table 如何实现全部单元格都能拖拽调整列宽,表头和表体都支持拖拽

vxe-table 如何实现全部单元格都能拖拽调整列宽,表头和表体都支持拖拽。

2025-02-06 14:43:54 591

原创 vxe-table 分组列也支持列宽调整宽度了

通过参数column-config.resizable启用列宽拖拽功能。最新新版本vxe-table分组列也支持列宽调整宽度了。

2025-01-19 15:42:21 295

原创 vxe-table 终于开始支持行高拖拽调整高度了

vxe-table 终于开始支持行高拖拽调整高度了,更新到最新版本,发现已经支持行高拖拽了,这下列宽拖拽调整和行高拖拽调整都能使用了。通过 row-config.resizable 和 row-resize 启用行高拖拽功能。

2025-01-16 17:58:38 495

原创 vxe-table 双击自适应列宽

vxe-table 双击自适应列宽,再实现一个需求,就是列宽被超出省略隐藏的情况下,用户如何能查看该列完整的内容,那么就可以开启双击自适应功能,在列宽拖拽线双击,就能实现这一列的宽度根据内容自适应调整列宽,就不用一个个去手动拖拽列宽了。通过 resizable-config.isDblclickAutoWidth 启用双击自适应列宽。

2025-01-07 14:34:48 684

原创 实现树表格 vxe-table 限制只允许子级行之间进行拖拽,同层级拖拽

实现树表格 vxe-table 限制只允许子级行之间进行拖拽,同层级拖拽;不允许跨节点拖拽

2025-01-02 10:38:35 836

原创 实现 vxe-table 限制只允许分组表头子列之间进行拖拽,同层级拖拽

实现 vxe-table 限制只允许分组表头子列之间进行拖拽,同层级拖拽;子列和子列之间进行拖拽,不允许跨分组拖拽。

2025-01-02 10:31:47 493

原创 vxe-table 树表格懒加载的拖拽行排序

通过配置 row-config.keyField 和 tree-config={lazy, loadMethod} 加载方法来开启树形懒加载。当启用懒加载后,必须通过 hasChild 属性来标识是否存在子节点,从而控制该节点是否允许被点击。实现 vxe-table 树表格懒加载的拖拽行排序,配合懒加载实现任意层级拖拽排序。// 异步加载子节点。

2024-12-27 09:25:25 666

原创 vxe-table 树表格新增数据,插入指定节点位置操作

vxe-table 新增数据,插入指定节点位置操作官网:https://vxetable.cnhttps://gitee.com/x-extends/vxe-table

2024-12-20 10:26:36 928

原创 vue 上传组件 vxe-upload 实现拖拽调整顺序

vue 上传组件 vxe-upload 实现拖拽调整顺序,通过设置 drag-sort 参数就可以启用拖拽排序功能。

2024-12-16 20:17:27 654

原创 vxe-table 实现复选框分页跨页勾选

vxe-table 实现复选框分页跨页勾选官网:https://vxetable.cn当使用数据分页与复选框多页勾选时,可以通过 checkbox-config.reserve 启用https://gitee.com/x-extends/vxe-table

2024-12-14 12:40:17 1054

原创 vxe-table 实现任意列拖拽排序

vxe-table 实现任意列拖拽排序;通过 column-drag-config.isToChildDrag 启用便捷拖拽成子节点,拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级。vxe-table 实现任意列拖拽排序,通过 column-drag-config.isCrossDrag 启用任意列拖拽排序,除了自身之外。启用后可以在不同表头直接任意拖拽,需要注意所有列必须有 field 属性。// 自己拖拽给自己的子级。// 显示辅助样式线。// 快捷键进入下级。

2024-12-12 10:27:22 850

原创 vxe-table 树表格拖拽排序,支持直接拖拽空节点成子级

vxe-table 树表格拖拽排序,支持直接拖拽空节点成子级通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点,拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级官网:https://vxetable.cn/https://gitee.com/x-extends/vxe-table

2024-12-11 09:52:13 532

原创 vue vxe-print 实现纯 web H5 打印功能

vue vxe-print 实现纯 web H5 打印功能;vue vxe-print 实现纯 web H5 打印功能,不需要额外安装浏览器插件,纯浏览器 Web 打印官网:https://vxeui.com/https://github.com/x-extends/vxe-pc-ui打印图片自定义页眉自定义页尾和页数分页打印表格https://gitee.com/x-extends/vxe-pc-ui

2024-12-10 09:56:47 1316

原创 分享 vxe-table 如何实现财务记账凭证表格、打印记账凭证功能

分享 vxe-table 如何实现记账凭证表格、打印记账凭证功能;分享 vxe-table 如何实现记账凭证表格、打印记账凭证功能官网:https://vxetable.cn/https://gitee.com/x-extends/vxe-table

2024-12-09 10:49:41 649

原创 vxe-table vue 树表格的拖拽排序

vxe-table vue 树表格的拖拽排序;vxe-table vue 树表格的拖拽排序,通过 row-drag-config.isCrossDrag 启用跨层级拖拽官网:https://vxetable.cn/排序完成好通过调用 getFullData 方法获取排序之后的数据https://gitee.com/x-extends/vxe-table

2024-12-09 10:44:18 644

原创 vxe-table 实现控制指定列默认隐藏,重置自定义列后还能自动还原

vxe-table 实现控制指定列默认隐藏,重置自定义列后还能自动还原。vxe-table 实现控制指定列默认隐藏,重置自定义列后还能自动还原,有个需求需要将某一列默认是隐藏的,但是可以通过自定义列设置显示,当点击自定义的重置按钮时,还能回复到默认的状态,实现也是非常简单的。通过 visible 参数设置默认为不显示就可以了。

2024-12-07 12:48:45 780

原创 vxe-table 实现在表头直接筛选,不是弹窗方式

vxe-table 实现在表头直接筛选,不是弹窗方式;vxe-table 实现表头筛选,不是弹窗方式,也不是表单;实现方式通过自定义表头插槽,自定义筛选模板来实现该功能。

2024-12-06 16:23:52 1291

原创 vxe-table 服务端筛选的用法

vxe-table 服务端筛选的用法;在 vxe-table 中,要实现服务端筛选,需要配置 filter-config.remote 和 filter-change 事件来实现。

2024-12-06 13:12:50 1125

原创 vxe-table 按回车键后自动新增一行功能

vxe-table 按回车键后自动新增一行功能,在开发可编辑表格是,默认情况下回车键是自动跳转下一行,当处于最后一行时,按下回车键需要自动新增一行。并将光标移动到新的行,实现也是非常简单的,vxe-table 新版本是支持这个功能的。回车自动换行功能是通过参数 keyboard-config.isLastEnterAppendRow 来控制是否启用的。启用后按回车键就可以实现在最后一行按回车后自动在表尾追插入一行数据

2024-12-05 08:49:54 983

原创 vxe-table 编辑权限控制,控制可编辑表格与只读表格切换

vxe-table 编辑权限控制,控制可编辑表格与只读表格切换;vxe-table 可以编辑模式和只读模式的参数是 edit-config.enabled 当需要编辑时就启用,当不需要编辑时就关闭。通过设置 edit-config.enabled=false。通过设置 edit-config.enabled=true。

2024-12-04 10:29:21 940

原创 vxe-table 设置拖拽调整列宽、拖拽调整列的宽度

vxe-table 设置拖拽调整列宽、拖拽调整列的宽度;在使用 vxe-table 是,常用的列宽拖拽调整功能,通过列宽调整可以让用户灵活的自定义列宽。两种拖拽调整列宽模式分别用于不同场景。

2024-12-03 12:24:55 1138

原创 vxe-table 设置树表格斑马线条纹样式

vxe-table 设置树表格斑马线条纹样式;vxe-table 设置斑马线条纹样式,通过设置 stripe 参数官网:https://vxetable.cn斑马线条纹,通过设置 stripe 参数树表格需要注意斑马线条纹仅支持 tree-config.transform 平级结构https://gitee.com/xuliangzhan/vxe-table

2024-12-02 12:34:45 877

原创 vxe-table 树形表格序号的使用

vxe-table 树形表格序号的使用;vxe-table 树形结构支持多种方式的序号,可以及时带层级的序号,也可以是自增的序号。官网:https://vxetable.cn通过 tree-config.seqMode=‘increasing’ 设置为自增序号https://gitee.com/xuliangzhan/vxe-table

2024-12-02 08:21:21 474

原创 vxe-table 树形表格的详细用法、树形表格懒加载

vxe-table 树形表格的详细用法、树形表格懒加载;vxe-table 树形表格的使用,支持多种数据结构,可以是带有父子结构的数组,也可以带有层级结构的嵌套数据。官网:https://vxetable.cnGitee只需要带有父子结构的平级数据,例如:id 和 parentId,字段名可以任意设置。对于保存到数据库的平级数据非常方便,无需转换就能渲染。带有层级结构的嵌套数据渲染带有层级结构的数据,

2024-11-30 11:18:50 2251

原创 vxe-table 实现表格关联弹窗选择数据

vxe-table 实现表格关联弹窗选择数据;当需要再表格中的某个字段是关联另外一张表示,需要将从另外表选择数据,并将数据保存在当前行中。'Vxe 高级筛选扩展''Vxe 企业版授权''Vxe 企业版授权''Vxe 零代码平台'

2024-11-29 14:16:46 1177

原创 vxe-table 服务端排序的用法详解

vxe-table 服务端排序的用法详解,在 vxe-table 使用排序功能非常简单,给列加上 columns.sortable 属性就可以启用列的排序功能,当然这是本地排序,就是对当前已加载过当前页的数据进行排序。对于查询列表列表,项目中使用最多的是服务端排序,因为大部分都涉及分页。这样就可以启用前端数据排序,仅限于当前页多个字段排序

2024-11-28 11:05:35 921

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除