Vue实现el-table导出excel功能项目实战

第一步：npm install --save xlsx file-saver

第二步：将文章顶部excel.zip是下载下来放到你的工程里，这是封装好的导出方法。

第三步：实际业务中使用

  1. 勾选导出excel示例

<template>
  <div class="mod-config">
    
    <el-table ref="multipleTable" :data="dataList" border @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="left" align="left" width="50">
        </el-table-column>
        
        <el-table-column prop="updateUser" header-align="left" align="left" width="150" label="更新人">
        </el-table-column>

      </el-table>
     
      
  </div>
</template>



<script>

import { exportJsonToExcel } from '../excel/Export2Excel';

export default {
  
  methods: {
    
    // Excel导出
    exportEvent() {
      //有勾选使用勾选数据，没有勾选的导出当前页数据，dataList为列表数据
      var arr = this.dataList;
      if (this.dataListSelections.length > 0) {
        arr = this.dataListSelections;
      }
      //调用导出方法传三个参数：第一个：multipleTable是el-table的ref名，第二个：arr是列表数组数据，第三个：是导出excel的名字
      exportJsonToExcel(this.$refs.multipleTable, arr, 'excel表名字');
    },
  }
}
</script>

     上图为勾选导出方法，dataListSelections是选中的数组

 2. 全部导出excel示例

<template>
  <div class="mod-config">
    
    <el-table ref="multipleTable" :data="dataList" border @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="left" align="left" width="50">
        </el-table-column>
        
        <el-table-column prop="updateUser" header-align="left" align="left" width="150" label="更新人">
        </el-table-column>

      </el-table>
     
      
  </div>
</template>



<script>

import { exportJsonToExcel } from '../excel/Export2Excel';

export default {
  
  methods: {
    
    // Excel导出
    exportEvent() {
      //调用导出方法传三个参数：第一个：multipleTable是el-table的ref名，第二个：arr是列表数组数据，第三个：是导出excel的名字
      exportJsonToExcel(this.$refs.multipleTable, this.dataList, 'excel表名字');
    },
  }
}
</script>

总结：利用三方库xlsx和file-saver的组合，实现从el-table中自动获取表头和prop，再将列表数据拼在一起形成excel，保存到本地。

下载不到excel.zip的可以私信我发你

总结不易，点赞支持，感谢互动！