随笔分类 -  vxe-table

摘要:分享 vxe-table vue 树表格拖拽二次确认 官网:https://vxetable.cn/ <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> import { Vx 阅读全文
posted @ 2024-12-09 11:35 可不简单 阅读(53) 评论(0) 推荐(0) 编辑
摘要:vue 用什么表格组件好,vxe-table 是支持 vue2 和 vue3 非常强大的表格库,是专业用于处理表格组件库。 官网:https://vxetable.cn/ 冻结列 单元格合并 单选 多选 多字段排序 列拖拽排序 树形表格 拖拽排序 可编辑表格 数据校验 查询表格 打印表格 数据分页 阅读全文
posted @ 2024-12-08 17:45 可不简单 阅读(263) 评论(0) 推荐(0) 编辑
摘要:使用 vxe-table 实现财务记账凭证和打印功能非常简单,实现在线实时编辑的记账凭证、自动合计金额等 官网:https://vxetable.cn/ <template> <div> <vxe-grid ref="gridRef" v-bind="gridOptions" @edit-close 阅读全文
posted @ 2024-12-08 16:29 可不简单 阅读(143) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树表格跨层级拖拽排序,通过 row-drag-config.isCrossDrag 启用跨层级拖拽 官网:https://vxetable.cn/ <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> 阅读全文
posted @ 2024-12-07 21:51 可不简单 阅读(62) 评论(0) 推荐(0) 编辑
摘要:vxe-table 实现控制指定列默认隐藏,重置自定义列后还能自动还原,有个需求需要将某一列默认是隐藏的,但是可以通过自定义列设置显示,当点击自定义的重置按钮时,还能回复到默认的状态,实现也是非常简单的。通过 visible 参数设置默认为不显示就可以了。 官网:https://vxetable.c 阅读全文
posted @ 2024-12-07 12:51 可不简单 阅读(193) 评论(0) 推荐(0) 编辑
摘要:使用 vxe-table 实现展开行的,通过设置 type=expand,给列加上 content 插槽,就可以开启展开行了 官网:https://vxetable.cn/ <template> <div> <vxe-grid v-bind="gridOptions"> <template #exp 阅读全文
posted @ 2024-12-06 12:30 可不简单 阅读(396) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树表格单元格选择复制粘贴,树结构默认是平级粘贴,可以通过 clip-config.isDeepPaste 启用深层数据结构的粘贴;需要注意只支持 tree-config.transform 模式 <template> <div> <vxe-table border show-ov 阅读全文
posted @ 2024-12-05 11:49 可不简单 阅读(81) 评论(0) 推荐(0) 编辑
摘要:vxe-table 全键盘操作,按键编辑方式设置,覆盖方式与追加方式; 通过 keyboard-config.editMode 设置按键编辑方式;支持覆盖方式编辑和追加方式编辑 按键编辑方式 <template> <div> <vxe-radio-group v-model="gridOptions 阅读全文
posted @ 2024-12-05 10:48 可不简单 阅读(154) 评论(0) 推荐(0) 编辑
摘要:在开发可编辑表格是,客户提了一个需求,默认情况下回车键是自动跳转下一行,当处于最后一行时,按下回车键需要自动新增一行。并将光标移动到新的行,实现也是非常简单的,vxe-table 新版本是支持这个功能的。 回车自动换行功能是通过参数 keyboard-config.isLastEnterAppend 阅读全文
posted @ 2024-12-05 08:46 可不简单 阅读(94) 评论(0) 推荐(0) 编辑
摘要:看看 vxe-table 渲染器强大到什么地步;在开发需求中,经常会在表格列表中放入图片展示,例如头像、视频图片,附件列表等,但需要对表格批量操作是,会比较繁琐,那么有没有方便操作一点的放呢,肯定是有的; 配合 vxe-upload 上传;比如复制或者截图一张图片,通过粘贴方式快速粘贴到单元格中,能 阅读全文
posted @ 2024-12-04 15:09 可不简单 阅读(71) 评论(0) 推荐(0) 编辑
摘要:当 ant-design-vue a-modal 使用 vxe-table 可编辑表格、下拉框被遮挡解决方法,由于不同组件库的层级不一样,通过设置大一点的层级就可以了 官网:https://vxetable.cn/ 安装 npm install vxe-pc-ui@4.3.11 vxe-table@ 阅读全文
posted @ 2024-12-04 11:04 可不简单 阅读(77) 评论(0) 推荐(0) 编辑
摘要:当 element-ui element-plus el-dialog 使用 vxe-table 可编辑表格、下拉框被遮挡解决方法,由于不同组件库的层级不一样,通过设置大一点的层级就可以了 官网:https://vxetable.cn/ 安装 npm install vxe-pc-ui@4.3.11 阅读全文
posted @ 2024-12-04 10:59 可不简单 阅读(131) 评论(0) 推荐(0) 编辑
摘要:vxe-table 可以编辑模式和只读模式的参数是 editConfig.enabled 当需要编辑时就启用,当不需要编辑时就关闭 官网:https://vxetable.cn/ <template> <div> <vxe-button status="primary" @click="toggle 阅读全文
posted @ 2024-12-04 10:27 可不简单 阅读(200) 评论(0) 推荐(0) 编辑
摘要:在 vxe-tabs 页签组件中使用 vxe-table 表格组件,自适应页签高度。 官网:https://vxetable.cn/ <template> <div> <vxe-tabs padding> <vxe-tab-pane title="页签1" name="1"> <vxe-grid v 阅读全文
posted @ 2024-12-03 22:01 可不简单 阅读(125) 评论(0) 推荐(0) 编辑
摘要:在使用 vxe-table 是,常用的列宽拖拽调整功能,通过列宽调整可以让用户灵活的自定义列宽。两种拖拽调整列宽模式分别用于不同场景。 动态列宽分配模式 调整列宽之后,对于未设置列宽的列会重新动态分配剩余宽度 <template> <div> <vxe-grid v-bind="gridOption 阅读全文
posted @ 2024-12-03 10:59 可不简单 阅读(350) 评论(0) 推荐(0) 编辑
摘要:使用 vxe-table 设置斑马线条纹样式,通过设置 stripe 参数,如果是树结构的数据,需要注意是否开启 tree-config.transform 平级结构才能支持;还可以通过 css 变量控制对应的颜色,支持全局或者局部修改颜色值 官网:https://vxetable.cn Gitee 阅读全文
posted @ 2024-12-02 12:30 可不简单 阅读(85) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树形结构支持多种方式的序号,可以及时带层级的序号,也可以是自增的序号。 官网:https://vxetable.cn 带层级序号 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </templa 阅读全文
posted @ 2024-12-02 08:19 可不简单 阅读(198) 评论(0) 推荐(0) 编辑
摘要:vxe-table 可编辑表格使用下拉树 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { const regionEd 阅读全文
posted @ 2024-11-30 17:29 可不简单 阅读(95) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树结构单元格选取与复制粘贴,通过 tree-config.transform 使用树形表格 <template> <div> <vxe-table border show-overflow keep-source height="600" :column-config="colu 阅读全文
posted @ 2024-11-30 17:26 可不简单 阅读(97) 评论(0) 推荐(0) 编辑
摘要:vxe-table 树形表格的使用,支持多种数据结构,可以是带有父子结构的数组,也可以带有层级结构的嵌套数据。 官网:https://vxetable.cn Gitee 带有父子结构的平级数据 只需要带有父子结构的平级数据,例如:id 和 parentId,字段名可以任意设置。对于保存到数据库的平级 阅读全文
posted @ 2024-11-30 11:10 可不简单 阅读(585) 评论(0) 推荐(0) 编辑