随笔分类 - vxe-table
摘要：vxe-table 使用展开行的两种模式详解， vxe-table 4.11+ v3.13+展开内容支持两种方式，固定和内嵌，其中默认的固定模式是全功能的，内嵌模式不支持虚拟滚动。 官网：https://vxetable.cn 安装 npm install vxe-pc-ui@4.3.90 vxe-
阅读全文
摘要：vxe-table 展开行的使用，子表复杂渲染，解决固定列与展开行重复渲染问题，需要注意最新版本才支持 官网：https://vxetable.cn 同时支持虚拟滚动和展开行与固定列、子表复杂渲染，需要注意最新版本才支持 使用 <template> <div> <vxe-grid v-bind="g
阅读全文
摘要：vxe-table 使用树结构点击筛选，子节点筛选，启用树结构后会同时对每个层级的子节点进行筛选 官网：https://vxetable.cn 效果 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa
阅读全文
摘要：vxe-table 使用树结构点击排序，子节点排序，启用树结构后会同时对每个层级的子节点进行排序 官网：https://vxetable.cn 效果 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa
阅读全文
摘要：vxe-table 如何实现全部单元格都能拖拽调整列宽，表头和表体都支持拖拽 官网：https://vxetable.cn 效果 代码 通过 resizable-config.isAllColumnDrag 启用所有单元格允许拖拽调整列宽 <template> <div> <vxe-grid v-b
阅读全文
摘要：vxe-table 实现双击自适应行高，行高拖拽调整高度 官网：https://vxetable.cn 通过 row-config.resizable 和 row-resize 启用行高拖拽功能以及 resizable-config.isDblclickAutoHeight 启用双击自适应行高 <t
阅读全文
摘要：vxe-table 如何将行标记为删除状态，不是直接删除 官网：https://vxetable.cn vxe-table 支持直接将数据标记待删除状态，通过调用 setPendingRow 方法标记为待删除状态 <template> <div> <vxe-button status="error"
阅读全文
摘要：最新新版本 vxe-table 分组列也支持列宽调整宽度了 官网：https://vxetable.cn https://github.com/x-extends/vxe-table 通过参数 column-config.resizable 启用列宽拖拽功能 <template> <div> <vx
阅读全文
摘要：如果通过 vxe-table 实现 Excel，可以和 Excel、WPS 复制粘贴 官网：https://vxetable.cn <template> <div> <vxe-grid ref="gridRef" v-bind="gridOptions" @cell-area-selection-e
阅读全文
摘要：vxe-table 实现行高拖拽功能，需要注意更新到最新版本才支持该功能 官网：https://vxetable.cn 通过 row-config.resizable 和 row-resize 启用行高拖拽功能; 当需要多列允许触发行高拖拽时，通过 row-resize 指定任意列 <templat
阅读全文
摘要：vxe-table 实现 excel 选择两个单元格，拖拽自动识别数字规则并根据规则自动填充新的单元格 官网：https://vxetable.cn 鼠标按住右下角扩展按钮，当选取一个单元格时，自动将当前内容填充到扩展区域的所有单元格中，如果不希望自动识别数字规则，可以同时按住 ctrl 键可取消值
阅读全文
摘要：vxe-table 实现 excel 选择一个单元格，拖拽自动复制新的单元格 官网：https://vxetable.cn 鼠标按住右下角扩展按钮，当选取一个单元格时，自动将当前内容填充到扩展区域的所有单元格中 <template> <div> <vxe-grid v-bind="gridOptio
阅读全文
摘要：使用 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
阅读全文
摘要：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/
阅读全文
摘要：vxe-table 实现复选框分页跨页勾选 官网：https://vxetable.cn 当使用数据分页与复选框多页勾选时，可以通过 checkbox-config.reserve 启用 <template> <div> <vxe-button status="success" @click="ge
阅读全文
摘要：vxe-table 实现任意列拖拽排序，通过 column-drag-config.isCrossDrag 启用任意列拖拽排序，除了自身之外。 官网：https://vxetable.cn 启用后可以在不同表头直接任意拖拽，需要注意所有列必须有 field 属性 <template> <div> <
阅读全文
摘要：vxe-table 树表格拖拽排序，支持拖拽到空节点，直接拖拽成子级；通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级 官网：https://vxetable.cn/ 通过 row-drag-config.
阅读全文
摘要：分享 vxe-table vue 树表格拖拽二次确认 官网：https://vxetable.cn/ <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> import { Vx
阅读全文
摘要：vue 用什么表格组件好，vxe-table 是支持 vue2 和 vue3 非常强大的表格库，是专业用于处理表格组件库。 官网：https://vxetable.cn/ 冻结列 单元格合并 单选 多选 多字段排序 列拖拽排序 树形表格 拖拽排序 可编辑表格 数据校验 查询表格 打印表格 数据分页
阅读全文
摘要：使用 vxe-table 实现财务记账凭证和打印功能非常简单，实现在线实时编辑的记账凭证、自动合计金额等 官网：https://vxetable.cn/ <template> <div> <vxe-grid ref="gridRef" v-bind="gridOptions" @edit-close
阅读全文
浙公网安备 33010602011771号