随笔分类 - vxe-table
摘要:vxe-table 表格 vue 单元格渲染上传附件,显示图片列表,适配上传附件样式的用法,在系统中渲染复制表格时,经常会涉及到附件和图片等上传问题,比如在列表单元格中需要支持上传附件,由于单元格太小,一般的组件根本无法正常显示适配,这时候就可以使用上传附件紧凑模式,通过配置更多按钮来实现。 htt
阅读全文
摘要:vxe-table 复制单元格内容总会在最后加个换行符,如何去掉末尾换行符的解决方法,默认情况下复制单元格内容时,会自动在文本尾部带个换行符。 https://vxetable.cn 通过 clip-config.isTrimCopyContent 来启用对复制后内容的修剪功能,自动去掉本次内容的换
阅读全文
摘要:vxe-table 个性化列自定义列弹出层修改高度、修改最大高度不自动适应表格高度的方法 默认情况下,在表格设置高度或最小高度的情况下个性化列弹出层默认内部模式(自适应表格高度),表格多高就最大多高;未设置高度情况下默认外部模式(不跟随表格高度) https://vxetable.cn 自适应高度时
阅读全文
摘要:vue 表格 vxe-table 加载数据的几种方式,更新数据的用法,vue 最强大的表格组件,支持 vue2 和 vue3,功能太多,这里介绍基础用法 https://vxetable.cn 双向绑定 data 方式 数据是双向同步的,修改 data 就可以自动刷新 <template> <div
阅读全文
摘要:分享 vue 表格 vxe-table 如何实现透视表拖拽对数据进行分组汇总,金额合计、平均值等的使用方式,通过 custom-config.allowGroup 启用分组拖拽功能 https://vxetable.cn 拖拽列进行数据分组后自动汇总 通过拖拽列到聚合列表,自动对数据进行合计汇总。设
阅读全文
摘要:vue 表格 vxe-table 手动操作单元格范围选择,手动选择 excel 指定区域的用法,当需要通用调用方法来手动选择知道区域时,可以通过调用 setCellAreas 方法将指定区域的单元格选中。 https://vxetable.cn 常用方法说明: getCellAreas 用于获取当前
阅读全文
摘要:vxe-table 如何自定义校验逻辑,比如第一行和第二行的字段进行关联判断,支持同步/异步自定义方法校验,自定义校验比较灵活,适合用于多字段组合校验。如果是异步时,并发校验的先后顺序是不确定的。 https://vxetable.cn 通过 validator 该方法来实现自定义逻辑,方法接收 {
阅读全文
摘要:vue 如何实现 vxe-table 的按键操作回车键的上下移动修改为 Tab 键的左右切换,支持将回车键替换Tab键的功能操作 https://vxetable.cn 通过设置 keyboard-config.enterToTab 将回车键上下切换行为修改为 Tab 键左右切换行为,还可以通过 k
阅读全文
摘要:vxe-table 如何实现对单元格数据校验不通过的单元格显示背景颜色,通过设置 valid-config.theme='beautify' 设置为高亮样式,调用 fullValidate 方法可以同时显示多个错误提示。 https://vxetable.cn 通过设置 valid-config.s
阅读全文
摘要:vxe-table 如何实现分页勾选复选框功能,分页后还能支持多选的选中状态,要实现这个功能,有多种方式 https://vxetable.cn 可以使用一个变量来记录已选的数据,在分页时重新赋值选中状态。 使用内置的选中状态记忆保留功能,可以直接使用,无需再额外写代码 分页多选保留状态 当使用数据
阅读全文
摘要:vxe-table 修改表格样式,修改边字体、框、背景色等样式的用法,支持 css 变量和 scss 主题变量,可以非常方便的对样式进行全局修改和局部修改。 https://vxetable.cn 修改字体大小 css 变量 如下: --vxe-ui-font-size-default: 18px;
阅读全文
摘要:vue 表格 vxe-table 开启筛选、excel 筛选框列表样式,通过设置列的 filterRender.name = 'FilterAggregation'启用组合筛选功能 https://vxetable.cn <template> <div> <vxe-grid v-bind="grid
阅读全文
摘要:vue 表格 vxe-table 树结构实现单元格复制粘贴功能,实现树层级节点复制功能;树结构默认是平级粘贴,可以通过 clip-config.isDeepPaste 启用深层数据结构的粘贴,需要注意树结构只支持 tree-config.transform 模式 https://vxetable.c
阅读全文
摘要:vue 表格 vxe-table 实现前端分页、服务端分页的用法,通过设置 pager-config 开启表格分页 https://vxetable.cn 实现前端分页 通过监听分页的 page-change 事件来来刷新表格数据 <template> <div> <vxe-grid v-bind=
阅读全文
摘要:vue 表格 vxe-table 如何实现右键菜单异步权限控制,权限控制邮件菜单按钮禁用与显示,支持自定义方法参数来控制菜单选项的异步禁用与显示 https://vxetable.cn 右键菜单加载中,通过 visibleMethod 和 loading | disabled | visible 属
阅读全文
摘要:vxe-table 如何实现鼠标选择多个单元格的复制粘贴功能,多个区域复制粘贴,当需要对相同列数的跨行或相同行数的跨列的多个区域进行复制粘贴时,可以通过 clip-config.isAcrossRow 与 clip-config.isAcrossColumn 启用 https://vxetable.
阅读全文
摘要:vxe-table 如何实现复选框范围选取,鼠标滑动选择行效果不,按住复选框的列,向上或向下滑动选取, 鼠标按 MouseLeft + Ctrl 局部选取/取消选择 https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions"
阅读全文
摘要:vxe-table 导入 excel xlsx 时,单元格内容值丢失前面0解决方法,不如到出数据为 "003200" ,导出到 xlsx 时,由于 xlsx 会自定义格式化数字,所以 0 就没了;解决方法就是知道为字符串类型,可以通过 column.cell-type 设置 查看官网:https:/
阅读全文
摘要:vxe-table 如何给分组表头下方的每一列增加一个筛选框 通过 floating-filter-config.enabled 来启用浮动筛选,再对指定列设置 floating-filters 来开启筛选渲染 https://vxetable.cn <template> <div> 显示图标按钮:
阅读全文
摘要:vxe-table 升级到最新版本后虚拟滚动没有老版本流畅的解决方法 https://vxetable.cn import { VxeUI } from 'vxe-table' VxeUI.setConfig({ table: { virtualYConfig: { mode: 'scroll' /
阅读全文

浙公网安备 33010602011771号