- 博客(103)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 vxe-table 如何实现分组列头折叠列功能
摘要：vxe-table实现分组列头折叠功能可通过控制列的visible属性实现。示例代码展示了如何为分组列添加折叠按钮，点击时切换子列的显示/隐藏状态。核心是通过vxe-colgroup分组，在表头模板中添加折叠按钮，绑定foldMaps状态对象来控制各列的visible属性，实现简洁优雅的列折叠效果。
2026-03-09 10:46:09
371
原创 vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条
本文介绍了使用vxe-gantt组件实现甘特图中任务条上下分布的方法。通过将每条任务拆分为计划和实际两条子任务，利用子视图渲染功能分别展示。关键实现步骤包括：1)设置cell-config.height调整行高；2)通过treeConfig配置父子任务关系；3)使用taskBarSubviewConfig自定义样式，通过transform调整位置。代码示例展示了如何转换数据格式，为每条主任务添加计划(蓝色)和实际(绿色)两个子任务条，最终实现上下并排显示的效果。该方法适用于需要对比计划和实际进度的项目管理场
2026-02-10 23:43:53
616
原创 vue甘特图 vxe-gantt 如何将子任务显示一行在父级中，父级行内渲染显示子任务的用法
摘要：vxe-gantt甘特图组件支持通过设置父级任务type为VxeGanttTaskType.Subview，配合task-bar-subview-config配置实现子任务在父级行内渲染。未展开时自动合并显示子任务总览，展开后独立显示各子任务。可通过task-bar-subview-config.showOverview控制总览显示，并用task-bar-config.barStyle.overviewBgColor自定义总览条颜色。该功能便于直观查看任务整体进度，代码示例展示了相关配置方法和数据结构
2026-01-30 08:30:00
599
原创 vxe-table 表格 vue 单元格渲染上传附件，显示图片列表，适配上传附件样式的用法
摘要：本文介绍了使用vxe-table在Vue项目中实现表格单元格内上传附件和图片的解决方案。针对单元格空间有限的问题，提供了两种显示模式：紧凑模式（默认显示部分附件，点击"更多"展开）和精简模式（仅显示数量）。通过配置VxeUpload组件实现文件上传功能，支持多文件、拖拽排序等功能，并提供了完整的代码示例。对于图片上传，还支持预览和自定义图片尺寸。这些方法有效解决了表格单元格中附件上传组件显示空间不足的问题。
2026-01-27 14:09:06
805
原创 vue 可视化表单设计器 vxe-form-design 创建自定义控件的详细用法
本文介绍了如何使用vxe-form-design可视化表单设计器创建自定义控件。主要包括：1) 定义控件分组，通过widgets属性配置左侧控件分类；2) 创建自定义控件的三个步骤：定义控件数据(包含标题、图标和参数配置)、定义表单视图模板和右侧属性配置模板；3) 注册控件到设计器，并引入到项目中。通过这种方式可以快速构建适合业务需求的可视化表单设计器，为开发低代码/零代码平台提供基础支持。
2026-01-16 11:31:09
776
原创 vxe-table 如何自定义校验逻辑，比如第一行和第二行的字段进行关联判断
vxe-table 提供了灵活的自定义校验功能，支持同步/异步校验及多字段组合校验。通过 validator 方法实现自定义逻辑，该方法可接收 { row, column, cellValue } 等参数，配合 getTableData 可进行多行关联判断。异步校验时需注意并发校验顺序不确定的问题。示例展示了基本校验规则设置、异步校验实现（使用 Promise）以及全量/变动数据校验的触发方式。校验结果通过 validate() 方法返回错误映射对象，便于处理校验结果。该功能适用于需要复杂校验规则的业务场景
2026-01-04 14:38:19
961
原创 vxe-table 导入 excel xlsx 时，单元格内容值丢失前面0解决方法
解决 vxe-table 导出 Excel 时数字前导零丢失问题的方法：当导出类似 "003200" 的数据时，Excel 会默认将其识别为数字而自动去除前导零。解决方案是通过设置列属性 cellType: 'string' 强制将该列数据作为字符串处理。如示例代码所示，在 no2 列添加 cellType: 'string' 配置即可保留前导零。这种方法适用于需要保留原始格式的编号、身份证号等数据导出场景。
2025-12-22 09:49:56
963
原创 vxe-table 如何给分组表头下方的每一列增加一个筛选框
本文介绍了如何在vxe-table分组表头下方添加筛选框。通过设置floating-filter-config.enabled启用浮动筛选功能，并在各列配置filterRender属性实现筛选框渲染。示例代码展示了如何为不同数据类型的列（如文本、数字、日期）配置相应的筛选组件（VxeInput、VxeNumberInput、VxeDatePicker等），同时支持筛选图标的显示控制。该功能适用于分组表头场景，可有效提升表格数据的筛选体验。
2025-12-22 08:42:56
960
原创 vxe-tree 树组件拖拽排序功能的使用教程
vxe-tree 树组件提供强大的拖拽排序功能，支持同层级和跨层级拖拽操作。通过设置 drag: true 启用拖拽功能，dragConfig.isPeerDrag 实现同层级拖拽，dragConfig.isCrossDrag 实现跨层级拖拽。组件采用树形结构数据格式，支持将节点拖拽到子级等复杂操作。该组件已在 GitHub 和 Gitee 开源，适用于 PC 端 UI 开发，可灵活配置满足各种树形数据排序需求。
2025-12-10 13:38:00
732
原创 vxe-gantt vue table 甘特图子任务多层级自定义模板用法
摘要：本文介绍如何使用vxe-gantt实现多层级甘特图子任务展示，通过树形结构渲染父子层级数据。首先安装相关依赖包(vxe-gantt@4.1.2等)，配置treeConfig参数开启树形结构转换功能。示例代码展示了如何自定义任务条样式、工具提示内容，并实现周日高亮显示效果。该组件支持通过id/parentId字段自动转换平级列表为层级结构，同时提供了丰富的自定义选项，包括任务条圆角、图片嵌入等功能，适用于复杂项目管理场景。
2025-12-07 10:05:01
875
原创 vue vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息
本文介绍了如何使用vxe-gantt组件实现自定义甘特图产品进度列表。通过task-view-config.viewStyle.cellStyle设置单元格样式，利用taskBar和taskBarTooltip插槽自定义任务条模板和提示信息。示例代码展示了如何配置甘特图参数，包括时间刻度、任务条样式、表格列定义和数据源，并实现了周日高亮显示效果。该组件支持高度定制化，可灵活调整任务条布局和内容显示，适用于各类项目管理场景。
2025-12-06 22:31:14
1087
原创 vue vxe-gantt table 甘特图实现多个维度视图展示，支持切换年视图、月视图、周视图等
摘要：vxe-gantt 甘特图组件支持多维度视图展示，可通过 task-view-config.scales 配置日期轴模式，实现年视图、季度视图、月视图、周视图和日视图的灵活切换。示例代码展示了如何通过 radio 按钮组控制视图切换，并配置了任务进度条样式和数据展示。该组件提供了直观的项目进度可视化功能，适用于各类项目管理场景。
2025-12-06 10:19:14
913
原创 vxe-gantt 甘特图使用右键菜单
vxe-gantt 甘特图组件提供了灵活的右键菜单功能，支持表头、内容区和表尾三种菜单配置。通过 menu-config 参数可以分别设置 header、body 和 footer 菜单项，并利用 visible 和 disabled 属性精确控制每个菜单项的显示状态和禁用状态。组件支持多级菜单嵌套，可自定义菜单图标样式。当用户点击菜单时会触发 menu-click 事件，开发者可在事件回调中处理具体业务逻辑。该组件还提供丰富的甘特图功能，包括进度条样式定制、列冻结等特性，适用于项目管理等多种场景。
2025-12-01 16:46:54
770
原创 vxe-gantt table 甘特图如何设置任务视图每一行的背景色
摘要：vxe-gantt甘特图可通过taskViewConfig.viewStyle.rowStyle动态设置任务视图行的背景色。示例代码展示了根据任务进度(progress)设置不同背景色：进度<10%显示淡紫色，<50%显示淡红色。还支持通过rowClassName添加自定义类名。该组件提供圆角进度条样式配置，数据格式包含任务名称、起止时间和进度值。相关资源：官网(gantt.vxeui.com)、GitHub/Gitee仓库。
2025-11-28 11:07:24
878
原创 如何使用 vxe-table 实现右键菜单异步权限控制
摘要：本文介绍了如何利用vxe-table实现右键菜单的异步权限控制功能。通过visibleMethod方法和loading、disabled、visible属性，可以根据后端返回数据动态控制菜单项的显示与禁用状态。示例代码演示了如何模拟异步请求，实现基于行数据的条件判断（如特定名称行禁用"复制"功能，仅对特定名称行显示"清除"功能）。这种方法有效解决了表格右键菜单权限的动态控制需求，适用于需要精细化权限管理的场景。
2025-11-10 13:01:40
726
原创 vxe-table 树形表格显示连接线的方式
Vxe-table 树形表格提供了两种连接线显示方式：1. 完整连接线模式（通过 tree-config.showLine=true 开启）；2. 仅子级显示连接线模式（设置 tree-config.showRootLine=false 隐藏第一级连接线）。示例代码展示了两种模式的实现方法，包含表格配置项和数据格式，通过简单的布尔值切换即可改变连接线显示效果。该功能可以直观展现树形数据的层级关系，适合需要展示复杂层级结构的场景。
2025-10-30 08:30:00
892
原创 如何使用 vxe-table 实现数据行自动滚动、自动轮播滚动、自动轮播数据效果
本文介绍了如何使用vxe-table实现数据行的自动滚动/轮播效果。通过调用scrollTo方法，结合定时器和虚拟滚动配置，可以轻松实现表格数据的平滑滚动展示。示例代码提供了开始/停止控制按钮、四种滚动速度选项，并处理了触底停止等细节。关键实现步骤包括：1）配置虚拟滚动；2）使用scrollTo方法控制滚动位置；3）通过定时器实现连续滚动。该方案适用于大数据量的表格展示场景，代码简洁高效，可直接集成到项目中。
2025-10-23 08:30:00
975
原创 如何使用 vxe-table 实现全键盘操作，按键切换复选框单选框的选中状态
Vxe-table 表格组件支持通过键盘操作切换复选框/单选框状态。通过配置 keyboardConfig.isChecked: true 启用该功能后，用户可以使用空格键切换选中单元格中的复选框或单选框。该功能特别适合需要键盘操作交互的场景，提升表格操作效率。示例代码展示了如何配置表格及启用键盘操作，包括箭头导航、回车、Tab 键等标准键盘控制功能。详见 vxe-table 官网 获取更多信息。
2025-10-22 08:15:00
1051
原创 解决 vxe-tree vxe-tree-select 树形下拉框当使用懒加载数据时如何回显
摘要：vxe-tree-select树形下拉框在懒加载场景下，通过设置lazy-options属性可实现未加载数据的回显。当数据被删除或未加载时，可将自定义数据放入lazy-options数组，确保正确显示label而非value值。示例代码演示了如何配置lazyList来处理人员变动或未加载节点的情况，解决组织架构选择等场景的回显问题。（149字）
2025-09-18 13:39:47
795
原创 vxe-table 单元格超出隐藏内容提示使用自定义插槽模板
vxe-table 提供了灵活的单元格内容溢出处理方案，通过 show-overflow 等属性可自动显示省略号。还支持自定义提示插槽模板，使用 header-tooltip、tooltip 和 footer-tooltip 插槽可分别定义表头、单元格和表尾的提示内容。示例代码展示了如何实现红色表头提示、橙色单元格内容提示（含链接）和绿色表尾提示，满足不同场景的个性化需求。这种方案既保持了表格的简洁性，又能在鼠标悬停时展示完整信息。
2025-09-08 08:15:00
693
原创 如何使用 vxe-table 实现穿梭框的功能，同时还能支持数据拖拽穿梭
本文介绍了如何使用vxe-table实现两种穿梭框功能：1）按钮穿梭，通过复选框选择实现数据左右交换；2）拖拽穿梭，需设置row-config.keyField确保主键不重复。文章提供了完整的示例代码，包括表格配置、数据绑定和按钮事件处理逻辑，展示了如何通过vxe-grid组件实现数据在两个表格间的转移。效果演示图直观展示了两种穿梭方式的操作过程，开发者可参考该方案快速实现表格数据穿梭功能。
2025-09-01 08:00:00
704
原创 vue 如何使用 vxe-table 来实现跨表拖拽，多表联动互相拖拽数据
Vxe-Table跨表拖拽实现方法 在Vue中使用vxe-table实现多表格联动拖拽，需为每个表格配置： row-config.keyField指定不重复的主键字段（如id） rowDragConfig.isCrossTableDrag: true启用跨表拖拽 确保各表格数据主键不冲突 核心代码： 效果：支持多个表格间直接拖拽数据行，通过getFullData()可实时获取各表数据状态。完整示例参考vxe-table官网。
2025-08-27 15:25:17
380
原创 vue vxe-gantt 甘特图的使用
本文介绍了Vue中使用vxe-gantt甘特图组件的方法。首先通过npm安装vxe-pc-ui、vxe-table和vxe-gantt相关依赖，并配置基础样式。文章展示了三种常见功能实现：1）基础甘特图展示任务名称和时间；2）通过taskBarConfig.showProgress显示任务进度条；3）自定义任务条颜色风格。每种功能都提供了完整的代码示例，包括template模板和script配置数据，帮助开发者快速实现项目进度管理的可视化需求。
2025-08-18 08:15:00
1172
原创 vue vxe-form表单项设置宽度的几种方式，固定宽度，自适应宽度等
Vxe-Form表单项宽度设置方式总结：1.默认宽度-根据内容自动调整；2.固定宽度-通过title-width属性设置固定值（如120px）实现标题对齐；3.自适应宽度-设置title-width="auto"以最长标题宽度为准自动对齐。三种方式均可通过span属性控制表单项所占列数，适用于不同业务场景的表单布局需求。
2025-08-11 08:15:00
1781
原创 vxe-table 实现列个性化自定义列功能，自动记忆用户的操作列状态，完整的详细教程
vxe-table 列个性化功能教程 vxe-table 支持用户自定义列状态（显示/隐藏、列宽、冻结等）并自动记忆，适用于ERP/后台管理系统。通过 toolbar-config.custom 启用功能，提供三种面板模式（工具栏/弹窗/抽屉）。关键配置： 唯一ID：id 确保各表格状态独立存储 列宽记忆：allowResizable 启用拖拽调整列宽 显隐控制：allowVisible 管理列显示状态 冻结列：allowFixed 固定常用列位置 代码示例展示了如何分别实现列宽、显隐、冻结状态的记忆功能，
2025-08-04 11:27:16
1152
1
原创 vxe-table 实现编辑文本域，支持拖拽高度，自适应高度、自定义高度的方式
本文介绍了如何使用vxe-table实现支持拖拽高度、自适应高度和自定义高度的表格文本域编辑功能。通过设置rowConfig.resizable属性和resizableConfig.isDblclickAutoHeight参数，可实现行高拖拽和双击自适应。示例代码展示了如何初始化行高(setRowHeightConf)和获取行高配置(getRowHeightConf)，并提供了完整的Vue组件实现方案，包括表格配置、数据绑定和操作方法。该方案特别适用于需要处理多行文本编辑且要求灵活调整行高的场景。
2025-07-23 08:30:00
999
原创 vxe-upload vue 实现图片上传、手动批量上传图片的方式
本文介绍了使用vxe-upload组件在Vue项目中实现图片上传的几种方式：1）基本安装配置方法；2）支持失败重新上传功能，通过show-error-status参数和自定义上传方法实现；3）手动批量上传图片，通过auto-submit=false关闭自动提交并结合submit()方法；4）混合上传模式，同时支持单个点击上传和批量上传，可配置显示上传按钮和错误重传按钮。每种方式都提供了完整的代码示例和效果演示，展示了如何通过axios实现文件上传进度跟踪和错误处理。
2025-07-04 17:30:31
821
原创 vxe-upload vue 实现附件上传、手动批量上传附件的方式
本文介绍了使用VxeUpload组件在Vue中实现文件上传功能的方法。主要包括三种场景：1)支持失败后重新上传，通过show-error-status参数启用；2)手动批量上传，通过auto-submit=false关闭自动提交并调用submit方法；3)混合模式，可单个或批量上传，支持失败重传。文章提供了完整的安装配置步骤和代码示例，展示了如何使用axios实现文件上传请求和进度更新。这些方法适用于不同业务场景的文件上传需求，具有灵活性和可定制性。
2025-07-04 16:55:25
1006
原创 如何使用 vue vxe-table 来实现一个产品对比表表格
本文介绍了如何使用vxe-table在Vue中实现产品对比表格。通过vxe-grid组件构建多层级表头结构，利用插槽功能展示产品图片和对比信息。代码示例展示了如何配置表格选项，包括边框、高度等属性，并详细演示了产品图片的渲染方式和对比信息的展示逻辑（如使用✔️/❌表示布尔值）。文章还提供了表格数据的结构定义和个性化单元格内容的处理方式，帮助开发者快速实现美观实用的产品对比功能。
2025-06-26 16:12:25
1011
原创 vue vxe-print 打印设置边距、页头页尾高度样式
在使用 vxe-print 进行打印时，可以通过设置 page-style 属性来调整页面的边距、页头和页尾的高度。通过 page-style.margin 可以设置页面边距，设置为 0 可以去除边距。此外，可以通过 page-style.header.height 和 page-style.footer.height 分别设置页头和页尾的高度。示例代码展示了如何在 Vue 组件中使用 vxe-print 进行打印，并通过按钮触发直接打印或调用方法打印。更多详细信息和示例代码可以参考官方文档和 GitHub
2025-05-12 13:40:56
474
原创 vxe-table 使用行分组，对数据进行分组，指定多字段分组的使用
vxe-table 使用行分组，对数据进行分组，指定多字段分组的使用查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-table效果通过设置 row-group-config 行分组模式，通过参数 groupFields 或者调用 setRowGroups 方法就可以设置行分组https://gitee.com/x-extends/v
2025-04-21 09:56:10
1180
原创 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获取已选择数据分为2个方法，一个是获取当前页 getCheckboxRecords()，一个是获取已保留 getCheckboxReserveRecords()getC
2025-04-08 18:06:49
1181
原创 vxe-table 如何实现左边是 vxe-tree 树组件，右边是表格联动操作
vxe-table 如何实现左边是树，右边是表格联动操作，当需要实现左右两侧联动时，表格 vxe-grid 配合分割模板 vxe-split 就很容易实现了查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-tablehttps://gitee.com/x-extends/vxe-table
2025-03-27 14:31:42
443
原创 vxe-table 实现行的上移和下移功能，行移动功能
vxe-table 实现行的上移和下移功能，行移动功能，实现用户点击上一行、下一行排序功能，同样也支持鼠标拖拽排序。
2025-03-10 08:15:00
1384
原创 vue vxe-color-picker 颜色选择器，启用取色管功能，选取页面内任意颜色
参数 show-eye-dropper 用于启用取色管功能，需要注意的是指支持谷歌浏览器。vue vxe-color-picker 颜色选择器，启用取色管功能，选取页面内任意颜色。
2025-03-04 12:04:43
466
原创 vxe-table 如何定制化样式，修改默认样式，修改边框背景色，单元格默认高度详细教程 - css样式方式
vxe-table 如何定制化样式，修改默认样式，修改边框背景色，单元格默认高度详细教程 - css样式方式由于项目的需求，可能需要对默认的表格样式就行修改覆盖，但是又不想影响到原有的功能，这时候就可以通过自带的 css 变量来修改样式，非常简单就能修改。通过 css 变量可以非常灵活的实现局部修改，当个表格修改、全局修改样式。查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gite
2025-02-21 11:15:13
2177
原创 vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体
vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体，当输入的值为负数时，会自动显示红色字体，对于数值或者金额输入时该功能就非常有用了。
2025-02-20 08:30:00
1021
原创 vxe-table 使用展开行的两种模式详解
vxe-table 使用展开行的两种模式详解， vxe-table 4.11+ v3.13+展开内容支持两种方式，固定和内嵌，其中默认的固定模式是全功能的，内嵌模式不支持虚拟滚动。查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-table固定模式，渲染性能最好，支持冻结列、虚拟滚动和单元格选择等内嵌模式内嵌模式，渲染性能较差，支持冻结列
2025-02-17 08:30:00
1477
原创 如何修改 vxe-table 单元格的默认行高
如何修改 vxe-table 单元格的默认行高，比如公司需求需要将行高调整到很低，默认的行高比较大。那么可以通过一下方式修改。
2025-02-11 09:44:21
1443
原创 vxe-table 实现行高拖拽功能
通过 row-config.resizable 和 row-resize 启用行高拖拽功能，当需要多列允许触发行高拖拽时，通过 row-resize 指定任意列。在 vxe-table 中实现行高拖拽功能非常简单，只需要以下几个参数就能开启，需要注意更新到最新版本才支持该功能。
2025-01-15 22:00:12
687
core.1.0.1.js
2017-12-17
es6.core.js
2017-12-09
xe-ajax3.1.3.js
2018-03-05
《零基础写c语言程序设计》
2012-11-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人