daols88-CSDN博客

原创 vue vxe-table 自适应列宽，根据内容自适应宽度的2种使用方式

Vxe-Table 提供了两种自适应列宽方式：1. 整列自适应（表头、表体、表尾统一宽度），只需设置列宽为"auto"；2. 仅表体自适应，通过columnConfig.autoOptions配置，可单独控制表头/表体/表尾是否自适应。第一种适合需要完整显示内容的场景，第二种适合内容字段较窄的情况。两种方式都可通过简单的配置实现灵活的列宽自适应效果。

2025-07-01 15:09:01 963

原创使用 vue vxe-table 实现复选框禁用，根据行规则来禁用是否允许被勾选选中

本文介绍了如何使用vue vxe-table实现复选框行级禁用功能。通过checkboxConfig中的checkMethod方法，可以根据行数据条件动态控制复选框是否可选中（如示例中年龄>26才允许勾选）。对于树形表格，同样可通过该方法禁用指定节点（如排除特定ID）。即使被禁用，仍可通过setCheckboxRow方法强制选中（优先级更高）。文中提供了基础表格和树形表格两种场景的完整代码示例，展示了如何配置checkbox禁用规则。

2025-06-23 10:09:26 1103

原创 vue vxe-date-picker 日期组件如何绑定值为 Date 类型或者时间戳

摘要：VxeDatePicker日期组件可通过value-format属性设置绑定值类型。默认绑定字符串格式（如"2025-01-01"）；设置value-format="date"可绑定Date对象类型（如new Date()）；设置value-format="timestamp"可绑定时间戳数字类型（如1735660800000）。三种绑定方式示例代码展示了不同格式的数据初始化方法，开发者可根据需求选择合适的日期值类型。

2025-06-19 09:10:50 440

原创 vxe-table 实现分组自动根据分组字段来展示层级关系

本文介绍了如何使用vxe-table实现自动分组展示表格数据。通过设置rowGroupConfig.mode='column'，表格会自动根据分组字段显示层级关系。代码示例演示了如何配置分组字段(role和date)并展示分组效果，无需手动指定rowGroupNode。该功能支持多级分组显示，并可以设置分组统计信息，适用于复杂数据的层级展示需求。

2025-06-05 13:28:15 368

原创 vxe-table 4.6升级 4.7+、4.13+ 后虚拟滚动不生效，卡顿的解决方法

在升级 vxe-table 从 4.6 到 4.7+ 或 4.13+ 后，用户可能会遇到虚拟滚动不生效和卡顿的问题。这是因为新版本默认关闭了虚拟滚动功能，而老版本默认是开启的。为了解决这个问题，可以通过设置 VxeUI.setConfig 来调整默认行为，确保所有版本都能保持一致的默认参数。具体设置包括启用 scrollX 和 scrollY 的虚拟滚动，并指定触发条件。这样设置后，表格的滚动将变得流畅，且老代码无需改动即可兼容。更多信息可参考 vxe-table 的官方文档和升级指南。

2025-05-20 16:11:49 590

原创 vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

在 vxe-table 中，行索引和列索引的获取方式因是否启用虚拟滚动而有所不同。行索引包括 rowIndex、$rowIndex 和 _rowIndex，分别对应 props.data 中的索引、可视区渲染中的行索引和当前表格数据的索引。列索引包括 columnIndex、$columnIndex 和 _columnIndex，分别对应 props.columns 中的索引、可视区渲染中的列索引和当前表格列的索引。在插槽模板中，可以直接通过参数获取这些索引，也可以通过调用 getRowIndex、getV

2025-05-16 10:17:12 404

原创 vxe-table 合并单元格、合并表尾的使用

mergeFooterItems 用于配置表尾单元格的合并规则。vxe-table 合并单元格、合并表尾的使用。mergeCells 用于配置单元格的合并规则。rowspan: 要合并多少行。colspan: 要合并多少列。row: 从第几行开始。col: 从第几列开始。

2025-04-24 09:51:05 750

原创 vxe-table 实现行分组增加对子集的数据统计

vxe-table 实现行分组增加对子集的数据统计查看官网：https://vxetable.cngitbub：https://github.com/x-extends/vxe-tablegitee：https://gitee.com/x-extends/vxe-table通过 rowGroupConfig.showTotal 来开启分组统计，显示子集数量自定义分组统计通过 rowGroupConfig.totalMethod 方法来自定义统计逻辑，返回字符https://gitee.com/x

2025-04-22 11:59:29 741

原创 vxe-table 数据行分组的使用方式

vxe-table 数据行分组的使用方式通过 rowGroupConfig.groupFields 设置分组字段，会顺序生成数据分组，列配置加上 rowGroupNode 指定为分组列，会显示分组展开按钮https://gitee.com/x-extends/vxe-table

2025-04-21 15:41:02 824

原创 vxe-table 使用 CDN 方式导出 xlsx 文件，无需 npm 的方式，老项目也能使用

vxe-table 使用 CDN 方式导出 xlsx 文件，无需 npm 的方式，老项目也能使用查看官网：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-26 12:16:10 1062

原创如何用 vxe-table 实现单元格内容格式化金额，千位分隔符，负数显示红色

其中 showNegativeStatus 是当数组为负数时，是否自动显示红色，如果 type=amount 时，可以配置是否千位分隔和现实货币符号。配置格式化金额非常简单，通过内置的数值格式化器就可以直接配置实现。实现单元格内容格式化金额，千位分隔符，负数显示红色。更多API文档就需要去看官网了。'数值（负数标红）''货币（负数标红）'

2025-03-19 08:01:48 861

原创如何用 vxe-table 来导 xlsx 格式文件，支持表尾合计和合并单元格

如何用 vxe-table 来导 xlsx 格式文件，支持表尾合计和合并单元格；下载后打开 xlsx 文件更多配置和参数查看官网就可以了，文档API太多了Gitee 地址：官网地址：https://vxetable.cn/

2024-12-31 17:28:30 1103 1

原创在使用 vxe-table 树表格时，如何将树结构拖拽成列表，将列表拖拽成树结构，实现方式分享

在使用 vxe-table 树表格时，如何将树结构拖拽成列表，将列表拖拽成树结构，实现方式非常简单最近在开发菜单配置页面时，需求是需要支持菜单任意拖拽调整顺序，可以跨层级拖拽，也要支持将不是分组的数据拖拽成分组。允许用户任意拖拽排序。https://vxetable.cn按照官网的用法，通过以下几个参数就可以开启了。通过 row-drag-config.isCrossDrag 启用跨层级拖拽，就是可以在不同层级直接拖拽；通过 row-drag-config.isSelfToChildDrag 启用允许自

2024-12-19 14:22:57 832

原创 vxe-table 最新的表单和表格的数据校验统一修改成高亮的错误提示样式

vxe-table 最新的表单和表格的数据校验统一修改成高亮的错误提示样式

2024-11-25 17:02:28 348

原创解决 vxe-table + element-plus 中使用 el-select 后无法选中的问题

官网文档：https://vxetable.cn在开发 vue 大型项目中，必然少不了 vxe-table 专业的表格库，当同时配合 element-plus 组件库使用时，发现一个问题，就是在单元格中渲染 el-select 时，会导致下拉选项无法被选中，点击后立马就消失，看了 vxe-table 官方文档，是支持与任意第三方库集成的，发现官网扩展插件里面有个适配插件安装一下就可以了正常选择了。而且还ts只是配置式渲染，非常好用。

2024-11-21 10:31:39 2684 1