- 博客(93)
- 收藏
- 关注
RSS订阅原创 vue 表格 vxe-table 高亮行支持取消操作
摘要：vxe-table组件默认点击行会高亮且无法取消选中，但通过设置currentRowConfig.strict为false可实现取消选中功能。当strict为true（默认）时强制保持一个高亮行，为false时允许通过再次点击取消选中。代码示例展示了如何配置表格参数，并通过currentRowChange事件监听选中状态变化，其中row参数为null时表示无选中行。这种灵活配置适用于需要允许不选中任何行的业务场景。
2026-03-17 10:31:26
370
原创 vxe-table 如何实现拖拽单元格自动复制内容功能
Vxe-table实现Excel式拖拽填充功能可通过以下配置：在表格配置中启用areaConfig.extendByCopy: true，配合mouseConfig.extension: true开启区域扩展功能。用户选中单元格后，拖动右下角扩展按钮即可自动复制当前值到目标区域（按住Ctrl键可取消数字自动识别）。代码示例展示了包含基础输入框、单选和多选下拉框的表格实现，通过双击单元格进入编辑模式，并支持键盘导航操作。该功能模拟Excel的智能填充体验，适用于需要批量复制单元格值的业务场景。
2026-02-24 10:55:12
965
原创 vue3甘特图 vxe-gantt 行内显示子任务，拆分任务展示同时可拖拽调整任务日期
Vxe-Gantt甘特图组件支持子任务内嵌展示和拖拽调整功能。通过设置父任务type='subview'和task-bar-subview-config配置，可在父任务条内直观展示所有子任务进度。支持拖拽调整任务日期(moveable)和时长(resizable)，无需手动设置子任务起止时间。组件提供丰富的样式自定义选项，包括圆角、颜色等，支持树形结构数据展示，便于项目管理。
2026-01-31 12:14:57
913
原创 vue表单vxe-form如何对一个规则同时多字段联动校验，对一个控件校验多个关联字段
摘要：本文介绍了vxe-form实现多字段联动校验的方法，通过配置rule规则中的field属性，可以针对复杂场景（如日期范围选择）进行多字段联合校验。示例展示了表单和表格中如何为一个控件绑定多个字段校验规则：1）表单中通过绑定虚拟字段"_startAndEnd"同时校验startDate和endDate；2）表格中同样使用虚拟字段实现多字段校验，并提供全量数据校验功能。这种方法适用于需要多个关联字段联合校验的场景，提高了表单验证的灵活性。
2026-01-27 17:10:40
618
原创 vue 如何实现 vxe-table 的按键操作回车键的上下移动修改为 Tab 键的左右切换
摘要：在Vue中使用vxe-table实现Tab键替代回车键进行单元格切换，只需在表格配置中设置keyboardConfig.enterToTab为true即可。同时支持自定义键盘行为，通过keyboardConfig对象可配置多种键盘操作功能（方向键、复制粘贴、Tab键等）。示例代码展示了完整配置，包括编辑模式设置、列定义和数据绑定，实现表格编辑时按Tab键左右切换单元格的功能。
2026-01-04 14:04:31
829
原创 vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法
vxe-table 提供了灵活的表格样式定制功能，支持通过 CSS 变量和 SCSS 主题变量修改字体、边框和背景色等样式。可以通过全局或局部方式自定义表格外观，包括： 字体大小修改：使用 --vxe-ui-font-size-* 变量设置不同尺寸的字体 字体颜色修改：通过 --vxe-ui-font-color、--vxe-ui-table-header-font-color 等变量调整文字颜色 边框样式修改：使用 --vxe-ui-table-border-* 变量控制边框颜色和宽度 背景色修改：通过
2025-12-30 10:34:00
980
原创 vue vxe-gantt 甘特图拖拽创建连接线
Vue Vxe-Gantt 甘特图组件支持通过拖拽创建任务依赖连接线。通过配置links数组定义连接关系，其中from和to分别对应源任务和目标任务的主键值，type指定四种依赖类型：FinishToStart、StartToFinish、StartToStart、FinishToFinish。组件提供task-link-config控制连接线高亮效果，task-bar-config.linkCreatable启用自定义创建依赖线功能，并可设置双击删除依赖线。示例代码展示了完整的甘特图配置，包括任务数据、列
2025-12-29 11:48:17
635
原创 vue 甘特图 vxe-gantt 任务里程碑和依赖线的使用
本文介绍了如何使用vxe-gantt组件实现甘特图中的任务里程碑和依赖线功能。通过设置task-bar-milestone-config配置里程碑样式，使用type=moveable启用里程碑类型，仅需设置开始日期。依赖线通过links数组定义，指定源任务和目标任务的主键ID及依赖类型。示例代码展示了完整的配置方案，包括里程碑图标自定义、任务条样式设置以及四种依赖关系类型(StartToFinish/StartToStart/FinishToFinish/FinishToStart)的应用。该组件支持拖拽调
2025-12-25 09:47:18
587
原创 vue 甘特图 vxe-gantt 如何自定义依赖线的颜色
摘要：本文介绍了如何在 Vue 甘特图组件 vxe-gantt 中自定义依赖线颜色。提供两种实现方式：1）通过 taskLinkConfig.lineColor 统一设置所有连接线颜色；2）在 links 数组中为每条依赖线单独设置 lineColor 属性。示例代码展示了如何定义连接关系（from/to 对应任务 ID）和设置不同颜色，并包含完整的甘特图配置选项。相关资源可参考官网和 GitHub/Gitee 仓库。
2025-12-22 07:49:52
615
原创 vxe-table 升级到最新版本后虚拟滚动没有老版本流畅的解决方法
摘要：vxe-table 升级后虚拟滚动不流畅的解决方法是将虚拟滚动模式改为老版本的 scroll 模式。通过 VxeUI.setConfig 设置 virtualYConfig.mode 为 scroll，可获得更流畅的滚动效果，但快速滚动时可能出现短暂白屏；而新版本默认的 wheel 模式基本不会白屏，但在复杂渲染场景下流畅度稍差。两种模式各有优劣，开发者可根据实际需求选择。
2025-12-16 14:31:09
175
原创 vue 中支持不定高的虚拟滚动的表格 vxe-table 的使用，动态高度虚拟列表高性能表格
摘要：本文介绍如何使用vxe-table实现Vue中的不定高虚拟滚动表格，适用于大数据量且需要自适应行高的场景。通过关闭show-overflow属性并配置virtualYConfig启用虚拟滚动，表格能动态估算行高并逐步修正。文中提供了完整代码示例，包括列配置、数据加载和性能优化方案，展示了如何高效渲染数万行数据。相关资源链接指向vxe-table官网和代码仓库，方便开发者进一步参考。
2025-12-11 08:45:00
1075
原创 如何实现 vxe-tree 树组件拖拽节点后进行二次确认提示
本文介绍了如何在vxe-tree树组件中实现拖拽节点后的二次确认功能。通过配置dragConfig对象的dragEndMethod方法，可以在拖拽结束时弹出确认对话框，用户确认后才执行拖拽操作，否则取消并提示。代码示例展示了如何结合VxeUI的modal组件实现确认弹窗和取消提示功能，同时支持自定义拖拽规则。该方案适用于需要谨慎处理节点拖拽操作的场景，确保数据变更前获得用户明确确认。
2025-12-10 16:28:00
646
原创 vue 常用的 gantt 甘特图组件推荐
本文推荐了两款Vue甘特图组件：dhtmlx-gantt和vxe-gantt。dhtmlx-gantt是老牌组件，功能全面但使用难度高，基础版免费但功能受限。vxe-gantt基于vxe-table开发，API简单易用，支持任务列表、子任务、日期轴视图、右键菜单和拖拽功能，开源版即可满足大部分需求，是Vue项目的推荐选择。两者都提供企业版增强功能。
2025-12-08 12:25:54
666
原创 如何使用 vxe-table 导出为带图片的单元格到 excel 格式文件
本文介绍了如何使用vxe-table将带图片的单元格导出为Excel文件。关键点包括：1）图片必须为有效链接且允许跨域获取；2）通过定义cellRender为VxeImage组件来渲染图片；3）示例代码展示了表格配置和导出方法。注意事项是图片链接需满足跨域要求，否则无法导出。最终效果可在Excel中正确显示表格内容和图片。
2025-12-05 08:15:00
695
原创 vxe-table 数据校验的2种提示方式
本文介绍了vxe-table表格组件的两种数据校验提示方式：1) 单个校验提示模式，仅显示首个错误信息；2) 多个校验提示模式（通过设置validConfig.msgMode='full'），可同时显示所有错误信息。两种方式都通过validate()或fullValidate()方法进行校验，并通过VxeUI.modal.message反馈结果。示例代码展示了两种模式的实现方法，包括表格配置、校验规则定义和校验按钮的事件处理。
2025-12-01 15:31:36
721
原创 用 vxe-table 实现行拖拽后二次提示确认
摘要：本文介绍了如何使用vxe-table实现行拖拽排序功能，并在拖拽结束时增加二次确认提示。通过配置rowConfig.drag和dragSort属性启用拖拽功能，利用rowDragConfig.dragEndMethod方法在拖拽结束时弹出确认对话框，根据用户选择决定是否执行排序操作。示例代码展示了完整的实现方案，包含表格配置、拖拽事件处理及数据定义。该方案可有效防止误操作，提升用户体验。（149字）
2025-12-01 15:02:11
355
原创 分享项目中vxe-table 使用展开行展开子表格的用法
本文介绍了使用vxe-table实现展开行显示子表格的方法。通过定义expand列的content插槽模板，在模板中放置子表格组件，并绑定父级数据的childList字段作为子表格数据源。示例代码展示了如何配置父表格和子表格的选项，包括列定义和数据绑定。该功能支持横向滚动时保持子表格可见，且模板内容可完全自定义，具有很高的灵活性。关键点在于通过插槽获取当前行数据row，并将row.childList绑定到子表格的data属性。
2025-11-29 11:42:21
876
原创 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
601
原创 解决 vxe-table 固定列对不齐，滚动后错位、展开行遮挡的问题，解决渲染空白、边框丢失问题
解决 vxe-table 固定列对不齐，滚动后错位、展开行遮挡的问题，解决渲染空白、边框丢失问题。解决方法，更新到最新版本就完美解决了；v4 版本更新到 v4.12+，v3版本更新到 v3.14+
2025-03-19 19:12:16
1829
原创 使用 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
1969
原创 使用 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
693
原创 vxe-table 如何使用树层级结构并开启虚拟滚动
vxe-table 如何使用树层级结构并开启虚拟滚动，默认情况下 vxe-table 是支持平级树结构开启虚拟滚动的，会自动转成树结构，但是有时候后端返回的数据是树层级，不是平级。这时候就可以用数据拍平方法实现。// 使用函数库工具类处理数据。
2025-03-03 11:34:23
1546
原创 如何在弹出窗中使用 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
1209
原创 vxe-grid 通过配置式给单元格字段格式化树结构数据，转换树结构节点
vxe-grid 通过配置式给单元格字段格式化树结构数据，转换树结构节点比如用户自定义配置好的数据源，通过在列中配置好数据，全 json 方式直接返回给前端渲染，不需要写任何格式化方法。
2025-02-19 08:30:00
958
原创 如何使用 vxe-table grid 全配置式给单元格字段格式化内容，格式化下拉选项内容
如果使用 vxe-grid 全配置式给单元格字段格式化内容，格式化下拉选项内容公司的业务需求是自定义配置好的数据源，通过在列中配置好数据，全 json 方式直接返回给前端渲染，不需要写任何格式化方法。
2025-02-18 08:30:00
895
原创 解决 vxe-table 展开行与固定列遮挡问题
解决 vxe-table 展开行与固定列遮挡问题，需要更新到 v4.11+ 版本才支持该功能。
2025-02-14 08:30:00
1464
原创 vxe-table 使用树结构点击筛选，子节点筛选
vxe-table 使用树结构点击筛选，子节点筛选，启用树结构后会同时对每个层级的子节点进行筛选官网：https://vxetable.cn
2025-02-12 08:45:00
927
原创 vxe-table 使用树结构点击排序，子节点排序
vxe-table 使用树结构点击排序，子节点排序，启用树结构后会同时对每个层级的子节点进行排序。
2025-02-11 16:11:26
870
原创 vxe-table 如何实现全部单元格都能拖拽调整列宽，表头和表体都支持拖拽
vxe-table 如何实现全部单元格都能拖拽调整列宽，表头和表体都支持拖拽。
2025-02-06 14:43:54
820
原创 vxe-table 分组列也支持列宽调整宽度了
通过参数column-config.resizable启用列宽拖拽功能。最新新版本vxe-table分组列也支持列宽调整宽度了。
2025-01-19 15:42:21
449
原创 vxe-table 终于开始支持行高拖拽调整高度了
vxe-table 终于开始支持行高拖拽调整高度了，更新到最新版本，发现已经支持行高拖拽了，这下列宽拖拽调整和行高拖拽调整都能使用了。通过 row-config.resizable 和 row-resize 启用行高拖拽功能。
2025-01-16 17:58:38
800
原创 vxe-table 双击自适应列宽
vxe-table 双击自适应列宽，再实现一个需求，就是列宽被超出省略隐藏的情况下，用户如何能查看该列完整的内容，那么就可以开启双击自适应功能，在列宽拖拽线双击，就能实现这一列的宽度根据内容自适应调整列宽，就不用一个个去手动拖拽列宽了。通过 resizable-config.isDblclickAutoWidth 启用双击自适应列宽。
2025-01-07 14:34:48
989
原创 实现树表格 vxe-table 限制只允许子级行之间进行拖拽，同层级拖拽
实现树表格 vxe-table 限制只允许子级行之间进行拖拽，同层级拖拽；不允许跨节点拖拽
2025-01-02 10:38:35
1002
原创 实现 vxe-table 限制只允许分组表头子列之间进行拖拽，同层级拖拽
实现 vxe-table 限制只允许分组表头子列之间进行拖拽，同层级拖拽；子列和子列之间进行拖拽，不允许跨分组拖拽。
2025-01-02 10:31:47
595
原创 vxe-table 树表格懒加载的拖拽行排序
通过配置 row-config.keyField 和 tree-config={lazy, loadMethod} 加载方法来开启树形懒加载。当启用懒加载后，必须通过 hasChild 属性来标识是否存在子节点，从而控制该节点是否允许被点击。实现 vxe-table 树表格懒加载的拖拽行排序，配合懒加载实现任意层级拖拽排序。// 异步加载子节点。
2024-12-27 09:25:25
1036
原创 vxe-table 树表格新增数据，插入指定节点位置操作
vxe-table 新增数据，插入指定节点位置操作官网：https://vxetable.cnhttps://gitee.com/x-extends/vxe-table
2024-12-20 10:26:36
1433
原创 vue 上传组件 vxe-upload 实现拖拽调整顺序
vue 上传组件 vxe-upload 实现拖拽调整顺序，通过设置 drag-sort 参数就可以启用拖拽排序功能。
2024-12-16 20:17:27
760
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人