我的博客

vue vxeui 上传组件 vxe-upload 全局配置上传方法，显示上传进度，最完美的配置方案

vxe-table 表格中使用输入框、整数限制、小数限制，单元格渲染数值输入框

Vxe UI vue vxe-table 虚拟树表格的使用，流畅的渲染万级数据树结构表格

Vxe vue vxe-table 分享实现打印表格以及同时打印两张表vxe-table 默认情况下支持单表打印。在有些情况下，页面上同时有几张表，这时需要一次性打印出来。可以利用 Vxe 自带的分页打印功能，实现多张表同时打印。

vue实现表格单元格选中功能在表格中实现鼠标点击任意单元格，选取的功能，通过 mouse-config 配置就可以开启单选功能，多选单元格选取功能需安装插件支持。

vue如何实现单元格多行文本超出、多行文本溢出省略。

使用 vxe-form 表单实现简历模板

vue 使用 vxe-tabs 页签实现右侧操作按钮、关闭所有页签、关闭右侧、关闭左侧

vue实现自适应列宽，根据内容自适应列的宽度之前老版本是通过计算字符数量，然后给动态给每一列设置宽度，不仅麻烦，还不好复用。看了 API 发现 v4.7+ 和 v3.9+ 版本已经直接就能支持了，只需加上 width=‘auto’ 就能自适应宽度。

vue如何在表格中使用上传附件、上传图片。

Vxe UI是 vxe-table 配套的组件库，如果表格中需要用到一些组件

Vxe UI vue vxe-table 实现表格数据分组功能，根据字段数据分组基于树结构功能就可以直接实现数据分组功能

Vxe UI vue 使用 VxeUI.previewImage() 图片预览方法

vxe-table 更新最新版本后图标兼容性问题

vxe-table 虚拟树、树形表格的使用如果开启虚拟树，只需要设置 y-scroll.gt（纵向虚拟滚动，默认100）或 x-scroll.gt （横向虚拟是滚动）transform 自动将列表转换为树结构rowKey 行的主键parentKey 行的父级主键<vxe-table :tree-config="{transform: true, rowKey: 'id', parentKey: 'parentId'}" :data="tableData"> <

vxe-table 表格 tooltip 被弹出框遮挡，z-index 层级过低，解决方案通过设置参数解决，具体看文档import VXETable from 'vxe-table'// 全局默认参数VXETable.setup({ version: 0, zIndex: 999, // 想多高就设置多高 table: { autoResize: true }})...

vxe-table 隐藏排序图标，去掉、不显示筛选图标，更换图标通过设置 sort-config 和 filter-config 就可以分别设置对应的配置项：排序：sort-config.showIcon 设置是否显示图标sort-config.iconAsc 升序箭头图标sort-config.iconDesc 降序箭头图标筛选：filter-config.showIcon 设置是否显示图标filter-config.iconNone 默认显示的图标，指定 class 字体图标filt

vue vxe-ui vxe-table 和 vxe-grid 的区别，有什么区别

vxe-table 导出 excel xlsx wps 导出数据默认支持的导出格式为：txt、html、xml、cvs导出 xlsx如果需要导出为 xlsx 格式文件，就需要用到 xlsx.js 这个库来转换数据，然后再安装 vxe-table-plugin-export-xlsx 导出插件，安装完成后列表中就可以选择 xlsx 类型了。npm install vxe-table-plugin-export-xlsx xlsx导出 pdf如果需要导出为 pdf 格式文件，就需要用到 j

vxe-table 在单元格中渲染简单的饼图有时候遇到比较特殊的需求，比如在很小的单元格中要放个饼图，如果使用 echart 等图表插件又显得太笨重了，毕竟单元格大小有限，vxe-table 官方也提供了一个非常流畅简单图表渲染，仅用于单元格，具体如下：bar-柱状图props:属性描述类型bar.width柱子宽度numberbar.max柱子最大值numbercolors柱子颜色列表string[]tooltip.formatter提示内容

vxe-table 使用分组表头列头2.x 版本使用 vxe-table-column 标签递归方式<vxe-table :data="tableData" show-overflow> <vxe-table-column title="基本信息"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column field="name"

vxe-table 如何关闭虚拟滚动、设置虚拟滚动触发规则vxe-table 支持高性能的虚拟渲染，但是有些功能是不支持虚拟渲染的，比如展开行、自适应高度…等虚拟滚动的参数是由以下控制的：scroll-x 用于控制横向虚拟滚动，gt 当大于指定条数时自动启用，默认 60，如果为 -1 则关闭虚拟滚动scroll-y 用于控制纵向虚拟滚动，gt 当大于指定条数时自动启用，默认 100，如果为 -1 则关闭虚拟滚动全局设置VXETable.setup({ table: { scrollX

vxe-table 更新 v2.9.17+ 解决表格原始数据无法被校验问题，表格校验无效问题旧的 validate 用法，无论数据是否发生变动，都会校验全量数据：//...methods: { // ... submitEvent(){ // 全量校验 this.$refs.xTable.validate().then(errMap => { if (errMap) { // 校验不通过！ } else {

vxe-table 给列格式化日期，格式化数据可以使用 xe-utils 函数库对日期进行格式化，然后显示在单元格中<vxe-table border :data="tableData"> <vxe-table-column field="name" title="Name"></vxe-table-column> <vxe-table-column field="sex" title="Sex" formatter="formatSex"&gt

vxe-table 按需加载，详细教程首先通过 cli 创建一个项目（如果你问 cli 怎么安装的话，建议自觉走开，没必要往下看了）vue create my-projectcd my-projectnpm run serve项目创建完成，正常跑起来3. 先来打个包npm run build打包完成，空项目的情况下 vue 打包后的大小为 128KB接着安装 vxe-tablenpm install vxe-table xe-utils引用依赖 src/plug

vxe-table vxe-grid 数据代理分页、自定义返回数据结构vxe-grid 是一套集成完整功能的数据表格，接下来使用其他一个数据代理功能来完成列表查询。上线配置 proxy-config，props 属性用于自定义返回的数据字段，ajax 用于配置请求接口首页 grid 在读取完配置信息后，默认会触发 ajax.query 动作去请求数据，必须返回一个 Promise，数据结构可以自行定义<vxe-grid border resizable pager-config

vxe-table 宽度问题，v-show 显示隐藏导致列宽错误，解决方法解决方法（任意一种都可以解决问题）只需要加上 :auto-resize=“true” 就可以自动重新计算表格，默认是关闭的也可以手动调用 recalculate 方法去重新计算表格<vxe-table auto-resize ... ></vxe-table><vxe-grid auto-resize ... ></vxe-grid>

vxe-table 如何使用分页，自定义分页表格和分页是两个不同的组件，可以搭配在一起使用，具体如下：<vxe-table show-overflow height="200" row-id="id" :loading="loading1" :data="tableData1"> <vxe-table-column type="checkbox" width="60"></vxe-table-column> <vxe-table-

vxe-table 导出 pdf 文件，解决中文乱码问题将表格导出为 pdf 文件，默认是不支持中文的，会显示成乱码，可以通过使用字体库解决。npm install xe-utils vxe-table vxe-table-plugin-export-pdf jspdf`// ...import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'// ...VXETable.use(VXETablePluginExportPD

vxe-table 如何实现多字段排序通过给列指定 sort-by 属性，可以是单个字段或者多个字段数组。<vxe-table border highlight-hover-row height="400" :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> &l

vxe-table vxe-list 实现虚拟树，大数据量树列表在 vue 渲染树结构是比较卡的，特别是数据大了，展开缩写都要几秒，那么解决问题的思路就是减少 dom 渲染，使用虚拟列表来模拟树结构，这个方式可以渲染大量的数据，缺点是每次点击展开、收缩都要重新更新列表，可能会闪一下，效果略差，但是支持渲染大数据量。实现虚拟树的步骤：拍平树结构构建列表树结构处理展开收缩测试中：渲染...

vxe-table 更新 v2.9+ 解决表格自定义校验报错问题旧的自定义校验用法validator(rule, cellValue, callback){ if (isError) { // 如果校验失败，则返回 callback(new Error('校验不通过提示消息')) } else { // 如果校验成功 callback() }}新的用法，由于 2....

vxe-table 如何自定义 Tab 键和回车键功能默认的快捷键功能是 Tab 键用于切换左右单元格，回车键用于切换到下面的单元格，由于在实际的项目需求中，需要用到特殊需求，比如回车键切换向右单元格，这样就可以编辑完一个接着编辑下一个，一般的处理方式可以通过监听 keyup 事件去实现，方式比较繁琐的。不过看到一个 vxe-table-plugin-shortcut-key 快捷键插件...

vxe-table 如何实现全表都可以编辑这种方式虽然可以实现，但该方式是非常糟糕，应该避免使用这种方式<vxe-table border show-overflow ref="xTable" height="500" :data="tableData" :edit-config="{tr...

vxe-table 为什么调用 insert 方法动态插入的数据没有同步到data 中问题分析：看官方文档的说明就是任何动态新增的数据都属于临时数据，不会双向同步到绑定的 data 属性中其实按照文档的说法管理增删改查共有两种方式：<vxe-table border keep-source ref="xTable" :edit-config="{trigger: ...

vxe-table 缺少必要的 “keep-source” 参数，这可能会导致出现错误，更新 v2.8+ 后出现问题解决问题原因：看文档的说明应该是 v2.8+ 对数据的优化，所有数据状态相关的表格都必须加上 keep-source 才有效，否则会出现特定功能无法正常渲染，比如数据修改状态显示、数据还原等…<vxe-table border :edit-conf...

vxe-table 在 Tab 页切换显示隐藏中导致样式错乱的解决方法问题原因：由于在隐藏的 div 中去初始化表格无法计算宽度的，所以会导致表格切换后样式错乱 ，dom 渲染中只有可视元素才存在宽度，如果元素处于隐藏状态是无法计算的；所以应该确保表格渲染时父元素处于可视状态<div> <ul> <li @click="showTab = 1">...

@[TOC](vxe-table 实现复选框鼠标圈选)设置 checkbox-config={range: true} 开启复选框圈选功能<vxe-grid border resizable show-overflow highlight-hover-row ref="xGrid" height="530" :data="tableData"...

@[TOC](vxe-table 渲染器详解，强大到没朋友的渲染器使用方式)vxe-table 渲染器什么场景需要用到呢？需要实现不同单元格编辑组件（比如：输入框、下拉框、日期选择等…）需要定制高级筛选（比如：实现类似 Excel 筛选框或定制更加强大自定义筛选等…）业务太多，构建可复用的渲染器一键生成可配置化表格等default-render 渲染配置正常情况下，如果...

@[TOC](vxe-table 实现 json 数据生成带 CRUD 功能的表格)先熟悉 vxe-grid 数据代理基本使用<vxe-grid border resizable height="500" :columns="tableColumn" :pager-config="tablePage" :toolbar="tableToolbar" :proxy-conf...