前端开发
刷新
使用 vxe-table 实现产品分组列表（按大类分组）

在后台管理系统中，经常需要将数据按照某个字段（如产品类别、部门、状态）进行分组展示，以便用户快速浏览和汇总信息。vxe-table 提供了强大的数据分组功能，只需简单配置即可实现按指定字段分组，并为每个分组生成汇总行，同时支持自定义分组标题和内容。 本文将演示如何基于 vxe-table 实现按产品 ...

vue表格使用 vxe-table 展开行实现产品列表与明细列表

在实际业务中，主从表（Master-Detail）是一种常见的数据展示形式，例如产品列表下包含多个订单明细、项目下包含子任务等。vxe-table 提供了强大的展开行（Expand Row） 功能，允许用户通过点击展开按钮，在主行下方嵌入子表格或其他自定义内容，完美实现主从数据的关联展示。 本文将介 ...

vxe-table 列拖拽排序与行拖拽排序：让表格布局任意排序

在数据表格中，除了展示数据，用户往往还希望根据自己的习惯调整列的顺序或行的顺序。vxe-table 提供了列拖拽排序和行拖拽排序功能，只需简单的配置即可启用，并且支持获取排序后的结果，方便持久化保存。 本文分别介绍列拖拽排序和行拖拽排序的配置方法，并提供完整示例。 配置说明 配置项 类型 说明 co ...

vxe-table 自定义表头合并：灵活合并任意列头

在实际项目中，默认的多级树形分组列头可能无法满足复杂报表的展示需求。vxe-table 提供了 show-custom-header 配置项，允许你完全自定义表头结构，实现任意行列的合并效果（类似 Excel 中的跨列居中、跨行合并）。 需要注意：启用自定义表头合并后，被合并的列将不支持拖拽调整列宽 ...

vxe-table 实战：金融、监控实时刷新与高频数据更新优化

在金融、监控等场景中，表格数据需要高频刷新（如每秒更新一次股票价格）。若采用全量替换 data 的方式，会导致表格整体重绘，造成性能浪费和滚动位置丢失。 vxe-table 提供了高效的局部更新能力：我们只需修改数据源中对应行的属性，表格会自动触发视图更新，从而实现流畅的实时刷新。 本文将演示如何基 ...

vxe-table 高级教程：实现分组多列合计与自定义统计

在实际业务中，我们经常需要对表格数据进行分组，并对每组内的数值列进行统计，例如：按部门统计薪资总和、按角色统计任务数量、计算年龄平均值等。 vxe-table 提供了强大的聚合配置 aggregateConfig，配合列属性 aggFunc，可以轻松实现分组多列合计，并且支持为不同列定制不同的统计方 ...

vxe-table 实现多列独立复选框：灵活实现复杂业务逻辑

在实际业务中，一个表格往往需要同时支持多种选择操作——例如“批量删除”和“批量导出”各自独立勾选，或者需要根据角色、权限展示不同的复选框列。vxe-table 提供了强大的插槽机制，允许你完全自定义表头和单元格的内容，从而轻松实现多列独立复选框，并且每一列的全选、半选状态都可以由业务逻辑单独控制。 ...

vxe ui 组件库在 Nuxt 中的集成与使用

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

vxe ui 组件库在 Nuxt 中的集成与使用

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

vxe-table 在 Nuxt 中的集成与使用

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

vxe-table 实现 Excel 风格向下复制填充（Ctrl + D 键）

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

[Full Clock 技术复盘] 一、浏览器前端如何实现百毫秒级时间校准？时间 API 推荐、模拟 NTP 算法原理及局限

博主头像 电脑本地时钟往往存在偏差，而在浏览器端由于协议限制无法使用标准 NTP，且寻找可靠 API 时间源也有些困难。本文分享 Full Clock 项目中采用的模拟校准策略：基于“往返延迟对等”假设，结合多家稳定 API 配合权重算法，实现百毫秒级的视觉同步。 ...

vxe-table 实现数据分组统计与表尾合计

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

M3实战：用MonkeyCode重构一个10万行项目

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

<1234···50>