Vue+ElementUI实现选择指定行导出Excel

这里记录一下,今天写项目时 的一个需求,就是通过复选框选中指定行然后导出表格中选中行的Excel表格

然后这里介绍一个工具箱(模板):vue-element-admin

将它拉取后,运行就可以看到如下界面:

这里面的很多功能都已经实现了,比如上图我标记的导出Excel、Zip、PDF等。。。

然后这里我们实现的是导出Excel,我们拷贝所要实现功能的代码、文件。

拷贝这两个方法到你的项目中需要导出Excel的组件中,将handleDownload方法绑定到导出按钮上

拷贝这个js文件到你的项目中

然后需要安装这两个依赖

npm install xlsx@0.14.1

npm install file-saver@2.0.1

通过了解,xlsx和file-saver是通过将JSON数据转为Excel。那这个就好说了!!!

这里解释一下:

可以去Element官方文档查看多选表格: 组件 | Element

:key 很重要!!! 本人踩的坑

如果你的项目表格中,没有删除功能、修改功能的话,那就可以不写它(:key)!!!

因为设置reserve-selection为true:在数据更新之后保留之前选中的数据。如果你的项目需求只是要求当前页导出的话,那可以不设置它!

如果需求是:后端是一页一页的返回数据。当选中第一页的某些行,点击第二页再选中第二页的行,最后点击按钮将第一页和第二页选中的行都导出!这样的话就必须设置这个属性为true。将它设置为true之后表格中又有删除、修改操作,就必须为表格写上:key,然后在修改、删除方法内更新这个值,否则你先选中某行,然后对该行进行了修改操作,此时你导出Excel它的数据还是你修改前的数据。你先选中一些行,然后删除这些行中的其中一行,此时你导出Excel它的数据还是会保留已经删除的数据

val就是你当前选中行的数据

javascript 复制代码
handleDownload() {
      // console.log(this.list)
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['编号', '姓名', '性别', '联系电话', '在校教龄(单位:年)', '职位']
        const filterVal = ['teaId', 'teaName', 'teaSex', 'teaPhone', 'seniority', 'teaType']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        // console.log(data)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'teaSex') {
          if (v[j]) {
            return '女'
          }
          return '男'
        }
        if (j === 'teaType') {
          if (v[j]) {
            return '教员'
          }
          return '班主任'
        }
        return v[j]
      }))
    }

这里我的代码,由于性别和类型是Boolean类型所以加了一个if判断。

tHeader就是你导出去的列名称,filterVal就是你要导出的列名

效果

如有帮助到你,请点一个关注。相互学习!!!

相关推荐
灰海30 分钟前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞3 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
我命由我123453 小时前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
YAY_tyy3 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
一路向北North4 小时前
apache poi 导出复杂的excel表格
apache·excel
m0_748461396 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
toooooop86 小时前
Excel随机金额或数字分配方法
excel
珍珠奶茶爱好者6 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy6 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js