- 博客(101)
- 资源 (19)
- 收藏
- 关注
RSS订阅原创 分享 vxe-table 如何在单元格内容渲染配置成超链接，不需要写插槽模板，方式非常简单
在vxe-table中将单元格内容渲染为超链接非常简单，不需要编写插槽模板。只需将cellRender.name设置为'VxeLink'，并在props中配置href参数即可。href支持字符串模板，可自动注入行数据，如'https://xxx.com?id={row.id}&name={row.name}'。还可设置target（如_blank）和status（如error）等属性。这种方式比传统插槽模板更简洁高效，适合快速实现表格单元格的超链接功能。
2025-09-18 13:30:00
308
原创 vxe-table 如何在单元格内容渲染成可点击复制的文本
vxe-table 实现单元格内容可点击复制功能的方法：通过配置 cellRender.name='VxeText' 并设置 clickToCopy=true 参数，即可让单元格文本支持点击复制。示例代码展示了如何为不同列（如 role 和 address）设置复制功能，点击单元格会自动将文本复制到剪贴板。该方法简单易用，只需在表格列定义中添加相应的渲染配置即可实现复制功能。
2025-09-18 09:04:13
298
原创 vxe-table 如果设置表头和表尾单元格文本超出提示框主题色
摘要 vxe-table 表格组件支持自定义表头、表体和表尾单元格的文本溢出提示框主题色。默认黑色提示框可通过 tooltipConfig.theme='light' 设置为浅色主题。配置项包括 headerTooltipConfig、tooltipConfig 和 footerTooltipConfig，可分别设置各部分提示框的宽高(maxWidth/maxHeight)和主题(light/dark)。当单元格内容过长时，会自动显示带主题色的提示框，提升表格可读性。
2025-09-12 09:37:44
804
原创 如何用 vxe-table 实现2个树表格可以互相拖拽数据
使用vxe-table实现跨表格树形数据拖拽，需设置row-config.keyField确保主键唯一，并启用row-drag-config.isCrossTableDrag。代码示例创建了两个可互拖的树表格，通过gridOptions配置拖拽参数和树形结构数据。关键点包括：1）设置keyField标识主键；2）开启isCrossTableDrag跨表拖拽；3）配置treeConfig定义树形关系。拖拽后可通过getRecordset()获取变更数据。
2025-09-11 08:15:00
295
原创 vxe-table 工具栏的内置功能按钮怎么修改顺序以及自定义样式
vxe-table 工具栏自定义指南 vxe-table 工具栏的内置功能按钮（导入、导出、打印等）默认固定在右上角，但可以通过配置轻松修改顺序和样式。核心方法是在 toolbarConfig 中定义 buttons 和 tools 数组，通过调整数组顺序改变按钮位置，并设置 status、icon 等属性自定义样式。示例代码展示了如何实现自定义布局，包括添加圆形图标按钮和调整按钮状态（primary/error/success）。内置按钮的样式和位置均可自由调整，效果见对比图示。详细文档可参考 vxe-t
2025-09-02 16:20:54
686
原创 vxe-table 实现列表单元格的合并，将多个列头合并为一个的实现方式
摘要：vxe-table最新版本支持通过merge-header-cells实现列头合并功能，可将多列合并为一列。示例代码展示了如何将name和role两列合并，通过设置mergeHeaderCells参数中的rowspan和colspan属性实现。同时需注意若存在个性化列功能，需配合columns-change事件更新合并规则。该功能简化了表头合并操作，提升了表格布局灵活性。
2025-09-01 08:15:00
774
原创 vue table 甘特图 vxe-gantt 实现多个表格的任务互相拖拽数据
本文介绍了如何使用vxe-gantt组件实现多个甘特图表格之间的任务数据互相拖拽功能。通过设置row-drag-config.isCrossTableDrag=true启用跨表拖拽，并确保每个表格数据使用row-config.keyField指定唯一主键字段。示例代码展示了三个独立的甘特图表格，每个表格都配置了拖拽功能，允许用户在不同表格间自由拖动任务条目。此外还提供了获取表格数据变化的方法，可实时获取新增、删除和现有数据量。这种实现方式特别适合需要多表任务协同管理的项目场景。
2025-08-28 09:47:49
967
原创 vxe-gantt 实现实现多行日期轴、按季度进行查询数据渲染
摘要：本文介绍了如何使用vxe-gantt组件实现多行日期轴展示和按季度查询数据渲染功能。通过vxe-date-picker选择季度后触发接口请求，获取任务数据并渲染甘特图，支持显示任务进度条、负责人等信息。代码示例展示了如何配置甘特图选项、日期选择器以及模拟数据加载过程，实现季度维度的任务管理视图。该方案适用于需要按时间维度展示任务进度的项目管理场景。
2025-08-25 10:46:04
545
原创 vxe-gantt 实现任务拖拽调整排序，手动点击排序的方法
本文介绍了如何使用vxe-gantt组件实现任务拖拽排序和手动排序功能。通过设置rowConfig.drag=true开启拖拽排序，并使用moveRowTo方法实现手动上下移动任务。代码示例展示了完整实现方式，包括表格配置、任务数据定义和操作方法。组件支持获取当前排序后的数据，可通过getFullData方法实现。该方案适用于需要灵活调整任务顺序的甘特图应用场景。
2025-08-25 10:37:40
776
原创 vue vxe-gantt 甘特图自定义任务条样式模板 table 自定义插槽模板
Vue vxe-gantt甘特图支持通过自定义插槽灵活渲染任务条样式。使用#task-bar插槽可以自定义任务条内容，包括图片、标题和进度等。示例代码展示了如何设置圆角背景、添加头像图片和进度信息，并提供了完整的配置选项和数据格式。通过组合vxe-gantt的配置属性和自定义模板，可以轻松实现个性化的甘特图展示效果。
2025-08-22 16:02:17
1015
原创 vue vxe-table 集成 vxe-gantt 甘特图的使用，vue 甘特图组件
Vue项目中集成vxe-gantt甘特图组件的使用指南，支持任务条和子任务功能。通过task-config配置任务条字段（startField/endField/progressField），支持多种日期格式。任务条可显示进度、设置圆角样式和颜色。子任务通过tree-config实现树形结构，自动转换父子层级数据。示例代码展示了基本配置和数据结构，包括任务名称、时间字段定义和进度控制。该组件提供了丰富的自定义选项，适合项目管理等场景使用。更多详情可查看vxeui官网文档。
2025-08-19 09:34:44
704
原创 vue vxe-table 如何实现表格设置默认行高同时又支持自定义行高
摘要：Vxe-Table 可通过 CSS 变量设置默认行高（如60px）并支持自定义行高。实现方法为：1）在样式中定义 --vxe-ui-table-row-height-default；2）启用 rowConfig.resizable 允许行高调整。示例代码展示了如何配置表格同时支持固定默认行高和内容自适应高度，适用于需要兼顾统一布局与灵活调整的场景。详见官方文档：https://vxetable.cn
2025-08-08 08:15:00
354
原创 vxe-table 实现服务端筛选、分页筛选
本文介绍了如何使用vxe-table实现服务端筛选和分页功能。通过配置filter-config.remote属性和绑定filter-change、clear-all-filter事件，可以实现远程筛选功能。示例代码展示了如何设置表格列的筛选条件，并通过loadList方法模拟后端数据返回。表格支持分页配置，包括当前页码、每页条数等参数。这种实现方式适用于需要从服务端获取筛选结果的场景，能够有效提升大数据量下的表格性能。
2025-07-28 15:20:53
336
原创 vxe-table 通过配置 ajax 方式自动请求数据，适用于简单场景的列表
本文介绍了如何使用vxe-table的ajax配置实现自动请求数据功能，适用于简单列表场景。文章展示了两种实现方式：普通列表和分页列表。通过配置proxy-config.ajax.query属性可以自动调用查询接口，简化了手动请求数据的繁琐流程。分页列表只需额外添加page-config配置项即可实现。代码示例清晰展示了Vue3+TypeScript下的实现方法，包括表格配置、列定义和模拟接口请求等关键代码。这种方式能有效减少重复代码，提高开发效率。
2025-07-21 15:37:58
865
原创 vue vxe-tree 树组件加载大量节点数据，虚拟滚动的用法
VxeTree 树组件处理大数据量的虚拟滚动方案 摘要：当树组件需要加载大量节点数据（上万条）时，直接使用数据双向绑定会影响性能。VxeTree 提供了虚拟滚动优化方案，通过调用 loadData 方法异步加载数据。主要实现步骤包括：1) 设置 virtualYConfig 配置启用虚拟滚动；2) 使用 fetch API 异步获取数据；3) 通过 loadData 方法加载数据到树组件；4) 提供展开/折叠全部节点的控制方法。这种方式有效解决了大数据量场景下的性能问题，同时保持了树组件的完整功能。
2025-07-14 10:15:02
438
原创 vxe-tree 树组件实现关键字搜索
本文介绍了使用vxe-tree树组件实现关键字搜索功能的方法。通过vxe-input输入框获取搜索内容，利用XEUtils工具库的searchTree方法对树形数据进行过滤筛选，并将匹配结果高亮显示。代码实现了500毫秒节流搜索、自动展开/折叠节点以及关键词高亮样式等功能。主要包含：1)基础树形数据结构；2)搜索过滤逻辑；3)节流优化处理；4)搜索结果高亮展示。该方案可快速为vxe-tree组件添加高效的搜索功能，提升用户交互体验。
2025-07-11 11:09:02
457
原创 vxe-table 实现行必须保存后才能继续编辑下一行
使用vxe-table实现行编辑必须保存后才能继续编辑其他行的功能。通过设置editConfig为手动触发编辑模式，并在编辑按钮点击时检查是否存在未保存的行数据。如果存在未保存数据，弹出提示让用户选择保存或放弃。保存操作会验证数据并更新表格，取消操作则还原数据。主要实现方法包括：1)使用isEditByRow判断行编辑状态；2)通过getUpdateRecords获取未保存数据；3)提供保存和取消操作按钮；4)使用validate验证数据有效性。这种方式可以有效防止用户同时编辑多行数据而未保存的情况。
2025-07-09 18:00:08
459
原创 vxe-table vue 表格禁用单元格编辑的2种实现方式
摘要：vxe-table提供了两种禁用单元格编辑的方式：1）通过editConfig配置的beforeEditMethod方法阻止特定行（如第二行）激活编辑状态；2）在编辑模板中直接使用disabled属性动态控制控件禁用状态，可根据行数据条件（如字段包含特定字符、数值限制等）灵活禁用单元格编辑。第一种方式阻止进入编辑模式，第二种方式允许进入编辑但禁用控件输入。两种方法都能有效实现表格编辑权限控制。
2025-06-25 10:12:24
510
原创 vxe-table 如何使用日期范围选择，同时绑定对应行的2个字段、开始日期和结束日期
摘要 vxe-table使用日期范围选择器同时绑定行数据的两个字段（开始日期和结束日期）的方法：通过配置editRender为VxeDateRangePicker组件，并设置startField和endField属性分别对应数据中的两个日期字段。示例代码展示了如何在vxe-grid中使用日期范围选择器，实现同时编辑每行的开始日期(startDate)和结束日期(endDate)字段。该方法比使用两个独立日期组件更便捷，适合需要日期范围选择的场景。 （字数：148字）
2025-06-19 09:20:12
446
原创 vxe-table如何自定义拖拽列宽最小列宽限制，在不改变列min-width的情况下
摘要：vxe-table可通过resizableConfig.minWidth自定义拖拽列宽的最小限制，即使列设置了min-width也能突破该限制。例如在示例中，虽然name列设置了minWidth:200，但通过全局resizableConfig.minWidth:60，仍可将该列拖拽缩小至60px。这种方式实现了列宽限制的灵活控制，适用于需要脱离默认列宽限制的场景。配置方法是在gridOptions中设置resizableConfig参数，并定义全局最小宽度值。
2025-06-13 16:24:36
1015
原创 vxe-table 如何实现直接渲染输入框控件，不需要点击编辑方式，直接就显示文本框
vxe-table实现直接渲染输入框控件的方法是通过自定义插槽模板。使用vxe-input组件绑定数据模型，在表格列配置中设置slots.default插槽即可直接显示文本框。对于多行文本域，需额外设置行高样式。这种方式无需点击单元格即可直接编辑，适用于需要即时编辑的场景，但可能影响性能。代码示例展示了文本框和文本域的实现方式，通过v-model绑定数据实现双向同步。
2025-06-10 15:37:25
795
原创 vxe-table vue 表格中如何渲染单元格日期控件，单元格可编辑
在vxe-table中渲染可编辑单元格日期控件，可通过edit-render属性实现。支持多种日期类型，包括年、季度、月、周、时间、日期时间等。使用VxeDatePicker组件，通过props设置type属性为对应日期类型。日期范围控件使用VxeDateRangePicker，通过startField和endField绑定两个字段。数据格式采用字符串日期格式，编辑模式可设置为行编辑(mode: 'row')或单元格编辑。官网示例展示了完整的日期选择器和日期范围选择器的实现方式。
2025-06-10 09:25:38
568
原创 vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能
Vxe-table Vue表格组件实现Shift键批量选择功能。通过设置checkboxConfig.isShiftKey: true启用该特性，用户可按住Shift键配合鼠标点击批量选取多行数据。表格配置包含边框、行高亮、复选框列及多列数据展示。组件支持响应式调整列宽，数据源包含13条示例记录。此功能提升了大批量数据操作的效率，适用于需要频繁多选的操作场景。具体实现代码简洁，只需在Vxe-grid组件中配置相关参数即可。
2025-06-09 15:02:02
901
原创 vxe-table 如何设置单元格垂直对齐
摘要：本文介绍如何在 vxe-table 中设置单元格垂直对齐方式。通过 cell-config.height 和 cell-config.vertical-align 属性可全局设置（默认为居中），或单独为列设置垂直对齐（支持 top/center）。示例代码展示了通过单选按钮动态切换对齐方式，以及合并单元格场景下的顶部对齐实现。适用于多行文本等需要调整垂直对齐的场景，合并单元格也能保持指定对齐方式。
2025-06-06 18:13:21
1081
原创 vxe-table 虚拟滚动不生效配置
在使用 vxe-table 时，虚拟滚动功能在不同版本中的默认设置可能不一致，低版本默认开启，而高版本可能默认关闭。为了确保所有版本的兼容性，建议手动配置虚拟滚动。通过 VXETable.setup 方法，可以设置 scrollX 和 scrollY 的 enabled 参数为 true，并指定触发虚拟滚动的行数阈值（如 gt: 100）。这样，当数据超过100行时，虚拟滚动将自动启用，确保表格性能优化。
2025-05-21 16:33:43
383
原创 vxe-table 合并单元格、分组列头的用法教程
vxe-table 提供了合并单元格和分组列头的功能，通过 mergeCells 配置可以实现单元格的合并。具体用法是通过设置 mergeCells 数组，指定 row（起始行）、col（起始列）、rowspan（合并行数）和 colspan（合并列数）来定义合并规则。例如，代码中从第 0 行第 3 列开始，合并 4 行 1 列。此外，columns 配置支持嵌套子列，实现分组列头效果。通过 children 属性可以定义多级列头结构，如 Group1 和 Group2 的分组列头。更多详细用法可参考 vx
2025-05-20 11:43:24
586
原创 vxe-table 实现当在最后一行时，回车自动新增一行数据
vxe-table 提供了一个功能，当用户在表格的最后一行按下回车键时，可以自动新增一行数据。这一功能通过设置 keyboardConfig.isLastEnterAppendRow 为 true 来实现。用户可以在表格的配置中启用此功能，确保在编辑模式下，按下回车键后会自动在表格末尾添加新行。此功能适用于需要频繁添加数据的场景，提升用户体验。代码示例展示了如何在 Vue.js 项目中使用 vxe-table 实现这一功能。更多详细信息和文档可以参考 vxe-table 的官网和 GitHub、Gitee
2025-05-14 07:46:31
977
原创 Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组
Vxe UI 的 vxe-table 组件支持通过配置 rowGroupConfig.groupFields 实现表格数据的分组功能，而无需使用树结构。在示例代码中，通过指定 groupFields 为 ['role']，表格数据将根据 role 字段进行分组。表格的列配置包括 name、role、sex、age 和 address，其中 name 列被设置为分组节点。数据源包含多个用户信息，表格将根据 role 字段自动分组显示。更多信息可参考 Vxe Table 的官网、GitHub 或 Gitee 仓
2025-05-13 13:50:25
811
原创 vxe-table vxe-modal 在弹窗中实现左边树和右边表格
vxe-table vxe-modal 在弹窗中实现左边树和右边表格查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-table
2025-05-06 08:15:00
1457
原创 vxe-form 实现多页签表单验证
vxe-form 实现多页签表单验证查看官网：https://vxeui.com/gitbub：https://github.com/x-extends/vxe-pc-uigitee：https://gitee.com/x-extends/vxe-pc-ui
2025-05-05 12:29:04
550
原创 vxe-table 实现根据选择年月来动态生成月份表头
实现效果就是选日期后，根据当前年份生成月份对应的列，再请求接口加载数据。vxe-table 实现根据选择年月来动态生成月份表头。
2025-04-29 10:19:45
813
原创 教程 vxe-table 实现点击按钮上下移动行排序
实现步骤，通过调用 moveRowTo 移动到对应的行位置，来实现行排序功能。教程 vxe-table 实现点击按钮上下移动行排序。
2025-04-25 10:53:23
910
原创 使用 vxe-table 来格式化任意的金额格式，支持导出与复制单元格格式到 excel
使用 vxe-table 来格式化任意的金额格式，支持导出与复制单元格格式到 excel查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-table格式化金额通过内置的 FormatNumberInput 格式化数值渲染器，配置 type = amount 为货币类型就可以了导出到 excel支持导出分组表头、合并、单元格类型、导出
2025-04-16 15:07:35
838
原创 vxe-tree 自定义插槽模板的用法,自定义标题，自定义图标
vxe-tree 自定义插槽模板的用法,自定义标题，自定义图标查看官网：https://vxeui.com/gitbub：https://github.com/x-extends/vxe-pc-uigitee：https://gitee.com/x-extends/vxe-pc-ui自定义图标自定义右侧按钮https://gitee.com/x-extends/vxe-pc-ui
2025-04-11 11:05:28
857
原创 vxe-table修改单元格高度的几种方式
vxe-table修改单元格高度的几种方式没，在开发项目时，有时默认的表格高度不能满足需求，这时候就可以调整默认的单元格高度。
2025-04-10 12:02:41
1552
原创 vxe-print 打印 vxe-table 打印表格，实现只在第一页显示表头，其他页不需要表头
vxe-print 打印 vxe-table 打印表格，实现只在第一页显示表头，其他页不需要表头。
2025-04-07 14:43:20
550
原创 如何在 vue 渲染百万行数据，vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染
vxe-table 渲染百万行数据性能对比，超大量百万级表格渲染；如何在 vue 渲染百万行数据；当在开发项目时，遇到需要流畅支持百万级数据的表格时， vxe-table 就可以非常合适了，不仅支持强大的功能，虚拟滚动渲染超大数据量也支持。
2025-03-28 17:06:23
1123
原创 vxe-table 展开行的使用，子表复杂渲染，解决固定列与展开行重复渲染问题
vxe-table 展开行的使用，子表复杂渲染，解决固定列重复渲染问题，需要注意最新版本才支持同时支持虚拟滚动和展开行与固定列、子表复杂渲染，需要注意最新版本才支持。
2025-02-13 16:47:02
934
原创 vxe-table 同时开启行高和列宽拖拽调整，自定义拖拽单元格高度和宽度
vxe-table 同时开启行高和列宽拖拽调整，自定义拖拽单元格高度和宽度。
2025-02-08 14:06:32
1003
X-Tool 轻量级JavaScript类库1.0.0
2015-05-01
xe-ajax-mock1.4.5.js
2018-02-08
xe-ajax3.0.13.js
2018-02-10
xe-ajax3.0.11.js
2018-02-09
xe-ajax-mock1.4.7.js
2018-02-09
X-Tool轻量级javascript类库1.0.1
2015-05-03
vue+vue-router+resquirejs+xe-ajax+mock 项目例子
2018-02-08
xe-ajax3.0.9.js
2018-02-08
xe-ajax-mock1.4.9.js
2018-02-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人