elementUi，可多选的表格下载导出，笔记

最新推荐文章于 2024-09-12 17:25:06 发布

致我们即将拥抱的将来

最新推荐文章于 2024-09-12 17:25:06 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUi上传文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_49284272/article/details/115168140

很重要的两个插件

npm install --save xlsx file-saver
npm install -D script-loader

在src文件夹中新建文件夹（命名为excel）
新建文件夹后，在excel文件夹内新建两个js文件，分别命名为Blob.js、export2Excel.js，然后复制链接的代码分别到相关文件里
去百度盘里找找

<el-table
        :data="tableData"
        :border="true"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >

首先不要忘了 @selection-change，然后是按钮

<el-button plain type="primary" @click="daochu">导出</el-button>

method方法

handleSelectionChange(val) { // 操作多选
      this.multipleSelection = val // 多选的行会存入multipleSelection数组中
    },
daochu() {
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.multipleSelection // multipleSelection是一个数组，存储表格中选择的行的数据。
        this.export2Excel()
      }).catch(()