随笔分类 -  vxe-table

摘要:使用 vxe-table 修改css默认样式,修改边框背景色,单元格默认高度详细说明 由于项目的需求,可能需要对默认的表格样式就行修改覆盖,但是又不想影响到原有的功能,这时候就可以通过自带的 css 变量来修改样式,非常简单就能修改。 通过 css 变量可以非常灵活的实现局部修改,当个表格修改、全局 阅读全文
posted @ 2025-02-21 11:18 可不简单 阅读(11) 评论(0) 推荐(0) 编辑
摘要:如果使用 vxe-grid 全配置式给单元格字段格式化内容,格式化下拉选项内容 公司的业务需求是自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。 官网:https://vxetable.cn npm install vxe-pc-ui@4.3 阅读全文
posted @ 2025-02-17 18:20 可不简单 阅读(11) 评论(0) 推荐(0) 编辑
摘要:vxe-grid 通过配置式给单元格字段格式化树结构数据,转换树结构节点 比如用户自定义配置好的数据源,通过在列中配置好数据,全 json 方式直接返回给前端渲染,不需要写任何格式化方法。 官网:https://vxetable.cn npm install vxe-pc-ui@4.3.90 vxe 阅读全文
posted @ 2025-02-17 18:20 可不简单 阅读(8) 评论(0) 推荐(0) 编辑
摘要:vxe-table 使用展开行的两种模式详解, vxe-table 4.11+ v3.13+展开内容支持两种方式,固定和内嵌,其中默认的固定模式是全功能的,内嵌模式不支持虚拟滚动。 官网:https://vxetable.cn 安装 npm install vxe-pc-ui@4.3.90 vxe- 阅读全文
posted @ 2025-02-16 13:51 可不简单 阅读(28) 评论(0) 推荐(0) 编辑
摘要:vxe-table 展开行的使用,子表复杂渲染,解决固定列与展开行重复渲染问题,需要注意最新版本才支持 官网:https://vxetable.cn 同时支持虚拟滚动和展开行与固定列、子表复杂渲染,需要注意最新版本才支持 使用 <template> <div> <vxe-grid v-bind="g 阅读全文
posted @ 2025-02-13 16:52 可不简单 阅读(36) 评论(0) 推荐(0) 编辑
摘要:vxe-table 使用树结构点击筛选,子节点筛选,启用树结构后会同时对每个层级的子节点进行筛选 官网:https://vxetable.cn 效果 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa 阅读全文
posted @ 2025-02-12 13:43 可不简单 阅读(23) 评论(0) 推荐(0) 编辑
摘要:vxe-table 使用树结构点击排序,子节点排序,启用树结构后会同时对每个层级的子节点进行排序 官网:https://vxetable.cn 效果 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa 阅读全文
posted @ 2025-02-11 16:21 可不简单 阅读(16) 评论(0) 推荐(0) 编辑
摘要:vxe-table 如何实现全部单元格都能拖拽调整列宽,表头和表体都支持拖拽 官网:https://vxetable.cn 效果 代码 通过 resizable-config.isAllColumnDrag 启用所有单元格允许拖拽调整列宽 <template> <div> <vxe-grid v-b 阅读全文
posted @ 2025-02-06 14:53 可不简单 阅读(37) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现双击自适应行高,行高拖拽调整高度 官网:https://vxetable.cn 通过 row-config.resizable 和 row-resize 启用行高拖拽功能以及 resizable-config.isDblclickAutoHeight 启用双击自适应行高 <t 阅读全文
posted @ 2025-01-22 11:45 可不简单 阅读(34) 评论(0) 推荐(0) 编辑
摘要:vxe-table 如何将行标记为删除状态,不是直接删除 官网:https://vxetable.cn vxe-table 支持直接将数据标记待删除状态,通过调用 setPendingRow 方法标记为待删除状态 <template> <div> <vxe-button status="error" 阅读全文
posted @ 2025-01-20 14:27 可不简单 阅读(27) 评论(0) 推荐(0) 编辑
摘要:最新新版本 vxe-table 分组列也支持列宽调整宽度了 官网:https://vxetable.cn https://github.com/x-extends/vxe-table 通过参数 column-config.resizable 启用列宽拖拽功能 <template> <div> <vx 阅读全文
posted @ 2025-01-19 15:45 可不简单 阅读(42) 评论(0) 推荐(0) 编辑
摘要:如果通过 vxe-table 实现 Excel,可以和 Excel、WPS 复制粘贴 官网:https://vxetable.cn <template> <div> <vxe-grid ref="gridRef" v-bind="gridOptions" @cell-area-selection-e 阅读全文
posted @ 2025-01-18 20:57 可不简单 阅读(43) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现行高拖拽功能,需要注意更新到最新版本才支持该功能 官网:https://vxetable.cn 通过 row-config.resizable 和 row-resize 启用行高拖拽功能; 当需要多列允许触发行高拖拽时,通过 row-resize 指定任意列 <templat 阅读全文
posted @ 2025-01-15 21:58 可不简单 阅读(49) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现 excel 选择两个单元格,拖拽自动识别数字规则并根据规则自动填充新的单元格 官网:https://vxetable.cn 鼠标按住右下角扩展按钮,当选取一个单元格时,自动将当前内容填充到扩展区域的所有单元格中,如果不希望自动识别数字规则,可以同时按住 ctrl 键可取消值 阅读全文
posted @ 2025-01-07 15:18 可不简单 阅读(33) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现 excel 选择一个单元格,拖拽自动复制新的单元格 官网:https://vxetable.cn 鼠标按住右下角扩展按钮,当选取一个单元格时,自动将当前内容填充到扩展区域的所有单元格中 <template> <div> <vxe-grid v-bind="gridOptio 阅读全文
posted @ 2025-01-07 15:15 可不简单 阅读(94) 评论(0) 推荐(0) 编辑
摘要:使用 vxe-table 实现分组表头子列之间进行拖拽,限制允许子列进行拖拽 官网:https://vxetable.cn 安装 npm install vxe-pc-ui@4.3.55 vxe-table@4.10.0 // ... import VxeUI from 'vxe-pc-ui' im 阅读全文
posted @ 2025-01-01 12:14 可不简单 阅读(60) 评论(0) 推荐(0) 编辑
摘要:vxe-table 新增数据,插入指定节点位置操作 官网:https://vxetable.cn npm install vxe-pc-ui@4.3.37 vxe-table@4.9.31 // ... import VxeUI from 'vxe-pc-ui' import 'vxe-pc-ui/ 阅读全文
posted @ 2024-12-19 20:41 可不简单 阅读(146) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现复选框分页跨页勾选 官网:https://vxetable.cn 当使用数据分页与复选框多页勾选时,可以通过 checkbox-config.reserve 启用 <template> <div> <vxe-button status="success" @click="ge 阅读全文
posted @ 2024-12-14 12:42 可不简单 阅读(267) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现任意列拖拽排序,通过 column-drag-config.isCrossDrag 启用任意列拖拽排序,除了自身之外。 官网:https://vxetable.cn 启用后可以在不同表头直接任意拖拽,需要注意所有列必须有 field 属性 <template> <div> < 阅读全文
posted @ 2024-12-12 00:02 可不简单 阅读(220) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树表格拖拽排序,支持拖拽到空节点,直接拖拽成子级;通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点,拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级 官网:https://vxetable.cn/ 通过 row-drag-config. 阅读全文
posted @ 2024-12-11 00:01 可不简单 阅读(124) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示