elementUI vue2 前端表格table数据导出(二)

为啥前端导出不在赘述了,不然读者也难看到这篇文章。

第一步:安装依赖

复制代码
npm install vue-json-excel

第二步:引用依赖配置

复制代码
// 导出Excel文件组件
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel)

第三步:组件调用

复制代码
<download-excel :data='tableData' :fields='json_fields' :name='`${tableDataType}.xlsx`'>
  <el-button type='primary'>导出</el-button>
</download-excel>
  • tableData 是将要导出的表格数据,只要能渲染el-table,就不需要进行二次处理
  • tableDataType 是导出的Excel文件的文件名
  • json_fields 是将要导出的表格表头
javascript 复制代码
<script>
  export default {
  data () {
    return {
      tableData :[],    // 存放用于导出excel的数据
      json_fields: {
        学号: "student_id",    //常规字段
        姓名: "student_name", //支持嵌套属性
        专业班级: "student_majorclass",
        成绩: "student_score",
        特长: "specialty",
        一轮笔试: "firstexam_score",
        一轮状态: "first_ispass",
        一轮面试:"interview_score",
        一面状态:"interview",
        二轮面试:"secondinterview_score",
        二面状态:"secondinterview"
      }
    }
  },
</script>

json_fields也可以使用动态配置

javascript 复制代码
// 动态配置导出Excel文件的表头
exportExcelHeader() {
   this.json_fields = {};
   this.tableFilterData.forEach(e => {
     this.json_fields[e.label] = e.prop;
   });
 },

动态配置参考

javascript 复制代码
      columnConfigs: {
        priceData: [
          // 库存数据列配置
          { label: "商品名称", prop: "ItemName" },
          { label: "规格", prop: "ItemGG" },
          { label: "单价", prop: "UnitPrice" },
          { label: "日环比", prop: "HBPrice" },
        ],
javascript 复制代码
tableFilterData = [
  { label: '字段1', prop: 'rsName' },
  { label: '字段2', prop: 'rsCode' },
]
相关推荐
中微子几秒前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课29 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在30 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵32 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius32 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91035 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala38 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy38 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101040 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端