1. 由于vxeTable 使用了font-awesome字体图标， 但是官方文档没有详细告诉你怎么引入使用，所以很多小伙伴都找不到原因。
解决办法：第一步安装依赖
npm install font-awesome --save第二步引入依赖样式文件 在main.js文件中引入
//引入font-awesome
import 'font-awesome/css/font-awesome.css';使用：
<vxe-button size="mini" status="success" icon="fa fa-plus" @click="toolbarAddClick">新增</vxe-button>效果：
2. 集成第三方库： 按钮方法导入导出的bug
<vxe-toolbar>
<template #buttons>
<vxe-button @click="impotEvent">选择文件</vxe-button>
<vxe-button @click="exportEvent">导出.xlsx</vxe-button>
</template>// 保存导出
this.$XSaveFile 会报错
//导入读取文件
this.$refs.xGrid1.readFile 会报错
解决办法：
需要安装 xlsx,
npm install xlsx
在main.js 里面： *(最后2个必须的，前2个看个人情况)
// 给 vue 实例挂载全局窗口对象
Vue.prototype.$XModal = VXETable.modal
Vue.prototype.$XPrint = VXETable.print
Vue.prototype.$XSaveFile = VXETable.saveFile
Vue.prototype.$XReadFile = VXETable.readFile
3.问题3如下图：引用了 vxe-table 组件， 但是vuecli 依赖用的是 vue3的依赖包。会报如下错
解决办法：
安装这个依赖：npm install xe-utils vxe-table
重新装依赖：
npm install xe-utils vxe-table -save
cnpm install xe-utils vxe-table -save
重新启动：启动成功
4. vxe-table 的表单验证不好使，毕竟新出来的组件，很多东西不完善，建议使用element- ui 或者 iview-ui 组件的表单验证：
element ui 表单验证地址： Element - The world's most popular Vue UI framework
iview -ui 表单验证地址： https://iview.github.io/components/form
会玩的都是混合用的，你懂的。
5. vxe-bable报错： utils.js?5ef4:217 [vxe-table] 不支持的文件类型 "xlsx"
检查你的package.json里面装这个几个依赖了没？
- npm 安装 vxe-table
- npm 安装 exceljs
- npm 安装 vxe-table-plugin-export-xlsx
然后再main.js 里面 引用 mian.js
- import VXETable from 'vxe-table'
- import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
- VXETable.use(VXETablePluginExportXLSX)
案例如下：
<template>
<div class="main-view">
<div class="btn-view">
<el-button size="mini" type="primary" @click="exportEvent">导出</el-button>
</div>
<div class="table-view">
<vxe-table
ref="xTable"
border
auto-resize
highlight-current-row
:radio-config="{ trigger: 'row' }"
:start-index="(tablePage.pageNum - 1) * tablePage.pageSize"
:loading="loading"
show-overflow
align="center"
header-align="left"
size="mini"
:data="tableList"
>
<vxe-table-colgroup
header-align="center"
align="center"
title="ee"
header-class-name="fs"
>
<vxe-table-column
type="seq"
title="序号"
align="center"
fixed="center"
></vxe-table-column>
<vxe-table-column
header-align="center"
align="center"
field="orgName"
label="名称"
sortable
></vxe-table-column>
<vxe-table-column
field="datasetCounts"
header-align="center"
align="center"
label="数量"
sortable
></vxe-table-column>
<vxe-table-column
field="subCounts"
header-align="center"
align="center"
label="调用次数"
sortable
></vxe-table-column>
</vxe-table-colgroup>
</vxe-table>
</div>
<div class="pagination-view">
<el-pagination
background
layout="total, sizes, prev, pager, next,jumper"
:current-page="tablePage.pageNum"
:page-size="tablePage.pageSize"
:page-sizes="pageSizes"
:total="tablePage.total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
导出的方法：
exportEvent() {
this.$refs.xTable.exportData({
filename: 'export',// 文件名字
sheetName: 'Sheet1',
type: 'xlsx',//导出文件类型 xlsx 和 csv
data: this.exportdata, // 数据源
// 过滤那个字段导出
// columnFilterMethod: function(column, $columnIndex) {
// return !(column.$columnIndex === 0 )
// // 0是复选框 不导出
// }
})
},
以上案例仅供参考， 可以解决报错问题。
6、vue项目中解决Chrome控制台[Violation] Added non-passive event listener to a scroll-blocking 'touchmove'输出问题
要做什么？
目标：解决在使用element-ui时出现警告[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive。
怎样去做？
使用npm管理器下载default-passive-events依赖包
npm i default-passive-events -S
然后
- 入口文件main.js引入
import 'default-passive-events'
然后刷新页面，警告消失
7.vxe-table vxe-grid column width 宽度问题，fixed 列样式错乱、显示隐藏导致、keep-alive 列宽错误等的解决方法
缩放窗口导致列宽错误，使用 Tab 切换导致宽度错误，还是显示隐藏 div 中切换导致宽度错误，还是弹出框中导致宽度计算错误，使用缓存路由导致列宽错误；加上参数 auto-resize 自动响应
- 解决方法（任意一种都可以解决问题）
- 只需要加上 :auto-resize=“true” 就可以自动重新计算表格，默认是关闭的
- 也可以手动调用 recalculate 方法去重新计算表格
如果是全局的方式：在main.js 里面
VXETable.setup({
table: {
autoResize: true
}
})
<vxe-table
auto-resize
...
></vxe-table>
<vxe-grid
auto-resize
...
></vxe-grid>
加上后，表格就会自动监听父容器的宽高变化，自动触发重新计算表格
如果是某些特殊场景，可以通过手动调用 recalculate 方法更新样式，比如 keep-alive：
export default {
// ...
activated () {
// 在 keep-alive 钩子函数中，显示之后手动调用
this.$nextTick({
this.$refs.xTable.recalculate()
})
},
// ...
}
8. vxe-table 导出 pdf 文件，解决中文乱码问题
8-1. # 基于 vxe-table 的表格插件，支持导出 pdf 格式，基于 jspdf 实现
# Installing
npm install xe-utils vxe-table
npm install vxe-table-plugin-export-pdf
npm install jspdf# main.js
import VXETable from 'vxe-table'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
VXETable.use(VXETablePluginExportPDF)解决 jspdf 无法支持中文问题；
将表格导出为 pdf 文件，默认是不支持中文的，会显示成乱码，可以通过使用字体库解决。
# main.js
// 可以将字体库下载放到自己服务器中，替换下载路径
VXETablePluginExportPDF.setup({
// 设置全局默认字体
fontName: 'SourceHanSans-Normal',
// 字体映射配置
fonts: [
{
fontName: 'SourceHanSans-Normal',
fontUrl: 'https://cdn.jsdelivr.net/npm/vxe-table-plugin-export-pdf/fonts/source-han-sans-normal.js'
}
]
})字体库可以去 github 下载 登录 - Gitee.com
字体名称 文件名
SourceHanSans-ExtraLight source-han-sans-extralight.js
SourceHanSans-Light source-han-sans-light.js
SourceHanSans-Normal source-han-sans-normal.js
SourceHanSans-Regular source-han-sans-regular.js
SourceHanSans-Medium source-han-sans-medium.js
SourceHanSans-Bold source-han-sans-bold.js
SourceHanSans-Heavy source-han-sans-heavy.js
导出结果如下：
9. vxe-table 通过设置 expand-config 属性和 type=expand 与 slot 可以开启展开行功能
现在有个需求我每次只想展开一个，展开现在这个，上一个必须自动关闭。
处理方法：@toggle-row-expand="toggleExpandChangeEvent"
code：
// 折叠行 展开事件
toggleExpandChangeEvent({ row, expanded }) {
console.log('行展开事件:', row , expanded)
this.$refs.xTable.clearRowExpand() //关闭所有行展开
this.$refs.xTable.setRowExpand([row], true) //打开当前点击这行
if (!expanded){
this.$refs.xTable.setRowExpand([row], false)
}
},最后为了方便大家的沟通与交流请加QQ群： 625787746
请进QQ群交流：【IT博客技术分享群①】：正在跳转