Vxe UI 是一套功能强大的 Vue 组件库，提供表格（vxe-table）、甘特图（vxe-gantt）、设计器（vxe-design）以及基础 UI 组件（vxe-pc-ui）等丰富功能。在 Nuxt 4 项目中使用 Vxe UI 时，官方为每个子库都提供了对应的 Nuxt 模块，其中 vxe ...

Vxe UI 是一套功能强大的 Vue 组件库，提供表格（vxe-table）、甘特图（vxe-gantt）、设计器（vxe-design）以及基础 UI 组件（vxe-pc-ui）等丰富功能。在 Nuxt 4 项目中使用 Vxe UI 时，官方为每个子库都提供了对应的 Nuxt 模块，其中 vxe ...

vxe-table 是一个功能强大的 Vue 表格组件库，但它依赖浏览器 DOM 环境，无法在服务端渲染（SSR）时直接运行。在 Nuxt 3 项目中使用 vxe-table 时，需要借助 Nuxt 模块进行配置，并将表格组件包裹在 中以确保仅客户端加载。 本文将从安装、模块配置到具体使用，提供完整 ...

在数据编辑场景中，用户经常需要将某个单元格或区域的内容快速复制到下方单元格。vxe-table 提供了类 Excel 的填充功能：选取区域后按下 Ctrl + D 键，即可将选中区域最上方单元格的值依次填充到下方单元格。 本文将通过完整示例，讲解如何通过 areaConfig.isFillByCop ...

在数据报表或管理系统中，经常需要按某个字段对数据进行分组，并计算每组的统计值（如求和、平均值），同时在表格底部显示所有数据的合计。vxe-table 提供了灵活的聚合配置 aggregateConfig 和自定义计算函数 calcValuesMethod，配合手动表尾 footerData，可以轻松 ...

说了这么多理论，来点硬的。我把一个10万行的老旧Django项目扔给M3，看它能不能帮我重构。结果超出预期。 项目背景 项目：内部CRM系统 语言：Python 2.7 → 目标Python 3.11 框架：Django 1.8 → 目标Django 5.0 代码行数：~100,000行（87个文件 ...

在开发数据表格时，合理的列宽设置能够显著提升用户体验。vxe-table 提供了 width、min-width 和 max-width 三种列宽属性，方便精细控制每一列的宽度设置。 参数 属性 类 作用 width Number 固定列宽。设置后该列将严格按照此宽度显示，不会被压缩或拉伸（除非内容 ...

在开发表格组件时，我们经常需要完成两个任务：格式化原始数据（如数字千分位、日期格式化）和自定义单元格样式（如根据数值显示不同颜色、添加后缀）。 vxe-table 提供了 formatter 和 cell-render 两个配置项，二者可以组合使用，让数据逻辑与展示样式分离，达到更灵活的配置效果。 ...

重复代码是程序员的天敌。MonkeyCode不仅能帮你写代码，还能帮你造"写代码的工具"——代码生成器。 代码生成器的价值 程序员的时间分配： 写新代码：30% 写重复代码：40% ← 这里可以优化！ 调试代码：30% 代码生成器把40%的重复劳动变成1次模板配置。 场景1：CRUD代码生成器 痛点 ...

vxe-table 不仅支持将表格数据导出为 .xlsx 文件，还提供了强大的自定义样式能力。通过 exportConfig.sheetMethod 钩子，你可以直接操作底层的 ExcelJS 工作表对象，对导出的 Excel 进行精细化样式设置，包括边框、字体、背景色、列宽、行高、超链接、图片等。 ...

在数据表格中，将数据按某个字段进行分组展示是一种常见的需求。vxe-table 提供了拖拽列字段进行分组的功能，用户无需编写额外代码，只需通过简单的拖拽操作即可动态改变分组规则，极大提升了数据探索的灵活性。 核心特性 可视化拖拽：将列头直接拖拽至分组区域，即可按该列分组。 多级分组：支持同时拖入多个 ...

在数据密集型表格中，将统计图表直接嵌入单元格，可以极大提升数据可读性与决策效率。vxe-table 原生支持柱状图（条形图）与饼图（含环形图、多饼混合）的单元格渲染，具备以下核心能力： 高性能：基于 Canvas 轻量绘制，配合虚拟滚动，支持万级数据流畅滚动。 高灵活性：支持自定义颜色、标签、提示框 ...

在使用 vxe-table 导出 Excel（xlsx）文件时，如果表格包含数据分组（行分组），默认导出的文件会保持收拢状态。通过配置可以实现在导出的 Excel 中自动展开所有分组层级。另外，如果单元格中需要导出图片，则必须确保图片 URL 是有效且允许跨域访问的，否则图片无法导出。 安装导出插件 ...

MonkeyCode入门必读：10个最常见的误区，你中了几个？ MonkeyCode火了之后，我看到了太多误解。 有人把它当"万能AI"，有人觉得它"不安全"，还有人觉得它"只适合新手"。 这篇文章，我澄清10个最常见的误区。 误区1："AI编程工具会取代程序员" 事实：AI取代的是重复性编码劳动， ...

在表格中展示分组数据时，不同的业务场景需要不同的层级呈现方式。vxe-table 提供了三种灵活的分组展示模式，通过 aggregateConfig.mode 参数即可轻松切换。 指定列按层级展示 说明：默认是参数 aggregate-config.mode=default 是自定根据分组字段按层级 ...

‍ 写在开头 点赞 + 收藏 学会 最近，有一个比较火的很有趣且灵动的登录页火了。 角色视觉跟随鼠标 输入框打字时扯脖子瞅 显示密码明文时避开视线 已经有大神（katavii）复刻了动画效果，并在github上开源了：github.com/katavii/ani… ，基于Reac ...

在实际业务中，下拉选择人员是一个常见需求。本文介绍如何使用 vxe-select 组件实现一个带头像、状态标签、多选、搜索等功能的人员选择器。 效果 多选、清空、筛选 自定义选项模板（头像 + 姓名 + 状态标签） 下拉框尺寸定制 状态映射（离职/试用期） 代码 <template> <div> < ...

在项目管理或任务调度类应用中，允许用户通过拖拽调整任务的顺序是一项非常实用的交互功能。VXE Gantt 组件提供了简单易用的行拖拽排序支持，只需配置 rowConfig.drag 和列属性 dragSort 即可快速启用。 说明 甘特图全局配置 rowConfig.drag 开启行拖拽功能，允许用 ...

在项目管理中，里程碑是一个非常重要的概念，它用来标记项目中关键的时间点或重大事件，如“项目启动”、“需求评审完成”、“正式上线”等。与普通任务不同，里程碑不占用时间跨度，只表示一个时刻。 vxe-gantt 组件提供了对里程碑的原生支持。通过将任务的 type 设置为 VxeGanttTaskTyp ...

在实际业务开发中，我们经常遇到主表格嵌套子表格，且需要在主表和子表上都提供复选框功能，并实现三态联动（全选、半选、未选）。本文将基于 Vue 3 + vxe-table 组件库，手把手教你实现一个支持父子表复选框联动的完整示例。 主表每行都有一个复选框，点击可同时控制其下所有子行；子表内部复选框单独 ...