我的博客

vxe-tree 自定义插槽模板的用法,自定义标题，自定义图标查看官网：https://vxeui.com/gitbub：https://github.com/x-extends/vxe-pc-uigitee：https://gitee.com/x-extends/vxe-pc-ui自定义图标自定义右侧按钮https://gitee.com/x-extends/vxe-pc-ui

vxe-table 同时开启行高和列宽拖拽调整，自定义拖拽单元格高度和宽度。

通过 row-config.resizable 和 row-resize 启用行高拖拽功能以及 resizable-config.isDblclickAutoHeight 启用双击自适应行高。vxe-table 实现双击自适应行高，行高拖拽调整高度。

vxe-table支持直接将数据标记待删除状态，通过调用setPendingRow方法标记为待删除状态。vxe-table如何将行标记为删除状态，不是直接删除。

vxe-tree 树组件懒加载的用法，通过 lazy 和 has-child-field 指定 当前节点是否使用异步加载，当点击展开时会自动调用 load-method 去加载子节点。

vxe-table 键盘操作，设置按键编辑方式，支持覆盖方式与追加方式；vxe-table 全键盘操作，按键编辑方式设置，覆盖方式与追加方式；通过 keyboard-config.editMode 设置按键编辑方式；支持覆盖方式编辑和追加方式编辑按键编辑方式单元格选取与按键编辑方式https://gitee.com/x-extends/vxe-table

vxe-table 分享常用的在表格中使用 element-plus 组件库的方式，在公司开发大型项目中，使用主流表格库 vxe-table 和 element-plus 组件库，可以在可编辑单元格中渲染非常简单的使用更多的组件，分享公司中常用的几种渲染方式，也可以使用插槽模板。

vxe-form table 修改表单数据校验的主题样式，在使用 vxe-form 表单校验时，数据校验可以支持2种主题样式。

vue vxe-table 分享实现无限滚动行方式，实现无限滚动加载有多种方式，可以使用 scroll 事件，也可以使用 scroll-boundary 事件，能满足不同的需求场景。以下是分享使用 scroll-boundary 事件的用法。

vxe-table v3.10+ 分享实现拖拽行调整顺序、列拖拽调整顺序的用法

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