leid6

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

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

摘要： 在数据表格中，行高自适应内容虽常见，但有时用户希望手动调整行高以突出特定行、适应多行文本或优化打印布局。vxe-table 提供了拖拽调整行高的功能，用户可直接在表格界面上通过鼠标拖拽某列的下边框，实时改变任意行的高度。 说明 可视化拖拽：鼠标悬停至指定列的单元格底部边缘，出现调整手柄后按住拖动即可 阅读全文

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

摘要： 在数据管理后台中，我们经常需要按维度分组展示数据，并在表格内直接呈现图表（如销售对比、完成率等），让用户一眼看懂趋势。 vxe-table 提供了强大的分组聚合（aggregateConfig）与单元格渲染（cellRender）能力，可以轻松实现“分组表格 + 柱状图/饼图”的混合展示。 该示例在 阅读全文

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

摘要： 在后台管理系统中，省市区选择是一个常见需求。vxe-tree-select 组件结合树形数据，可以优雅地实现三级联动的下拉选择效果。本文将介绍如何基于该组件快速实现省市区选择，并支持搜索、清空、仅选择末级节点等实用功能。 效果 下拉框中展示完整的省/市/区树形结构 选中后输入框显示完整路径（如「广东 阅读全文

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

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

摘要： 在后台管理系统中，表格合计行（如统计总分、总年龄等）是非常常见的需求。VxeTable 提供了灵活的定制能力，通过自定义表尾（footer）配合事件监听，可以轻松实现合计行的动态更新。本文将以 vxe-grid 组件为例，演示如何在数据编辑、粘贴等操作后，实时刷新表尾的合计数据。 实现步骤 开启表尾 阅读全文