提示：附官方文档记录： 官网文档链接: https://vxetable.cn/v3/#/table/start/install

---

前言

提示：项目中实际使用：

vxe-table多功能表格 编辑、实时保存、自定义打印、导出csv、导出xlsx

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vxe-table安装

首先确定vue版本 其依赖于vue3.0+ 或 vue2.6.0+

//安装
npm install xe-utils vxe-table@3
// main.js 引用
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

二、使用步骤

1.编辑

代码如下（示例）：

// 支持行编辑 单元格编辑 点击编辑 双击编辑等 具体请自行查看官网。 本示例展示的是点击编辑单元格
<vxe-table
   border
   resizable
   show-overflow
   :data="tableData"
   :edit-config="{trigger: 'click', mode: 'cell'}">
   	<vxe-column field="role" title="Role" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
      </template>
    </vxe-column>
</vxe-table>

2.实时保存

代码如下（示例）：

//html  @edit-closed事件回调编辑函数
<vxe-table
   border
   resizable
   keep-source
   show-overflow
   ref="xTable"
   :data="tableData"
   :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'fa fa-pencil'}"
   @edit-closed="editClosedEvent">
// 实时保存函数
editClosedEvent ({ row, column }) {
   const $table = this.$refs.xTable
   const field = column.property
   const cellValue = row[field]
   // 判断单元格值是否被修改
   if ($table.isUpdateByRow(row, field)) {
     setTimeout(() => {
       VXETable.modal.message({
         content: `局部保存成功！ ${field}=${cellValue}`,
         status: 'success'
       })
       // 局部更新单元格为已保存状态
       $table.reloadRow(row, null, field)
     }, 300)
   }
 }

3.数据联动计算

代码如下（示例）：

//html   countAmount计算方法
<vxe-column title="总价">
   <template #default="{ row }">
     <span>{{ countAmount(row) }} 元</span>
   </template>
 </vxe-column>
// 计算方法 
countAmount (row) {
  return row.amount * row.num1
},

4.导出csv文件

代码如下（示例）：

//html   命名
<vxe-button @click="exportDataEvent">默认导出</vxe-button>
<vxe-button @click="exportSelectEvent">导出选中</vxe-button>
<vxe-button @click="openExportEvent">高级导出</vxe-button>
<vxe-table ref="xTable1"></vxe-table>
// 默认导出方法 
exportDataEvent () {
  this.$refs.xTable1.exportData({ type: 'csv' })
},
// 导出选中
exportSelectEvent () {
  this.$refs.xTable1.exportData({
    data: this.$refs.xTable1.getCheckboxRecords()
  })
},
// 高级导出 
openExportEvent () {
  this.$refs.xTable1.openExport()
}

5.导出xlsx文件

vxe-table 默认支持导出 CSV、HTML、XML、TXT格式的文件，不支持 xlsx 文件
要想导出 xlsx 文件，需要使用 vxe-table-plugin-export-xlsx 依赖

// npm 安装依赖
npm install vxe-table-plugin-export-xlsx
//main.js 文件引用
// 基于 vxe-table 表格的适配插件，用于兼容 element-ui 组件库
...
import VXETable from 'vxe-table'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'

...
VXETable.use(VXETablePluginExportXLSX)

一开使用的是3.0版本的，依赖，这样使用就会报错 Uncaught (in promise)
第二次使用2.0.0版本的 也是会一个方法的错误
最后测试 2.2.2 最稳定

npm install vxe-table-plugin-export-xlsx@2.2.2

// 导出xlsx
exportExcel(){
  this.$refs.addressTab.exportData({
    filename:"成本计算模板",
    sheetName: 'Sheet1',
    type:'xlsx',
    types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
    useStyle:true, //是否导出样式
    isFooter:false, //是否导出表尾（比如合计）
    // 过滤那个字段导出
    columnFilterMethod: function(column, $columnIndex) {
      return !(column.$columnIndex === 0 )
      // 0是复选框 不导出
    }
  })
}

总结

实际记录项目内代码，详细的使用还需借助vxe-table官网文档，链接: https://vxetable.cn/v3/#/table/start/install