el-table分页多选导出excel表格

需求：使用el-table分页查询表格的时候记录上一页已选中的数据，之后点击导出按钮后对表格已选中数据导出excel表格，导出成功后清空选中的状态，本文章只记录分页导出的关键代码，其中包含之前的导出全部表格，导出全部表格的数据请查看：vue2+element全部或条件导出表格一部分的数据_vue2 前端导出table-CSDN博客

1.实现

2.主要代码

以下4个缺一不可，不然实现不了

 type="selection"：复选框

 reserve-selection：数据更新之后保留之前选中的数据（需指定 row-key

  row-key="id"：这个key必须是唯一值，通常选择当前行的id就行

  @selection-change="handleSelectionChange"：会收集复选框选中的数据，值：[{收集的行的所有数据}]

    <el-table          
  :data="tableData"
            style="width: 100%; margin-top: 20px"
            @selection-change="handleSelectionChange"
            row-key="id"
            ref="multipleTable"
            id="out-table"
        >
            <el-table-column type="selection" reserve-selection width="55" align="center"> </el-table-column>

        </el-table>

收集到的复选框数据给变量接收 

        handleSelectionChange(val) {
            this.selectTableData = val;
        }

调用导出的方法 这个方法所需要的Export2Excel文件可以看我的这篇文章：

vue2+element全部或条件导出表格一部分的数据_vue2 前端导出table-CSDN博客

        // 导出的方法
        exportExcel(exportData) {
            var that = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require('./Export2Excel'); //刚刚新建Export2Excel.js文件的路径
                const tHeader = ['昵称', '姓名']; //自定义列名
                const filterVal = ['createTime', 'tmName']; //这个也就是对应的字段名和列名一一对应上
                // const list = this.tableData; //table数据
                // console.log(list, '数据源');
                const data = that.formatJson(filterVal, exportData);
                export_json_to_excel(tHeader, data, '列表excel'); //导出文件名称
            });
        },

 调用导出后清空已选择的复选状态

         this.exportExcel(this.selectTableData);
                    this.$nextTick(() => {
                        this.$refs.multipleTable.clearSelection();
                    });

3.完整代码（包含表格全部导出）

<template>
    <div style="margin-top: 20px">
        <el-button @click="exportClick()">导出全部表格</el-button>
        <el-button @click="exportSelectClick()" type="primary">导出选中表格</el-button>
        <el-table
            :data="tableData"
            style="width: 100%; margin-top: 20px"
            @selection-change="handleSelectionChange"
            row-key="id"
            ref="multipleTable"
            id="out-table"
        >
            <el-table-column type="selection" reserve-selection width="55" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="日期" width="180"> </el-table-column>
            <el-table-column prop="tmName" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="updateTime" label="地址"> </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { list } from '../../../api/test';
export default {
    data() {
        return {
            tableData: [],
            page: 1,
            limit: 10,
            total: 0,
            selectTableData: [] //选中的需要导出的数据
        };
    },
    mounted() {
        this.query();
    },
    methods: {
        query(pagedta, limitdata) {
            let page = 1;
            let limit = 10;
            if (pagedta) {
                page = pagedta;
                limit = limitdata;
            } else {
                page = this.page;
                limit = this.limit;
            }
            list(page, limit).then((res) => {
                console.log(res, '0=8888');

                let { data } = res;

                if (pagedta) {
                    this.exportExcel(data.records);
                } else {
                    this.tableData = data.records;
                    this.total = data.total;
                    console.log(this.tableData, '所有数据');
                }
            });
        },
        exportClick() {
            this.$confirm('此操作将该项目下所有点集导出excel文件，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('导出excel');
                //如果不想影响表格的显示，可以重新调一次表格的接口
                //这里是全部导出数据赋值
                // this.form.pagesize = this.total;
                // //重新调用表格数据，也就是重新调用了页面加载表格显示数据
                this.query(1, 10000);
                // this.getPigList();
                //调用成功后延迟加载导出
                // this.exportExcel();
            });
        },
        exportSelectClick() {
            if (this.selectTableData.length > 0) {
                this.$confirm('此操作将导出选中的点集，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log('导出excel');
                    this.exportExcel(this.selectTableData);
                    //如果不想影响表格的显示，可以重新调一次表格的接口
                    this.$nextTick(() => {
                        this.$refs.multipleTable.clearSelection();
                    });
                });
            } else {
                this.$message.warning('请选中数据后再导出');
            }
        },
        // 导出的方法
        exportExcel(exportData) {
            var that = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require('./Export2Excel'); //刚刚新建Export2Excel.js文件的路径
                const tHeader = ['昵称', '姓名']; //自定义列名
                const filterVal = ['createTime', 'tmName']; //这个也就是对应的字段名和列名一一对应上
                // const list = this.tableData; //table数据
                // console.log(list, '数据源');
                const data = that.formatJson(filterVal, exportData);
                export_json_to_excel(tHeader, data, '列表excel'); //导出文件名称
            });
        },
        formatJson(filterVal, jsonData) {
            //这个就是个过滤，在list中只要filterVal的数据，可以根据theader和filterVal进行个筛选
            return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
        handleSizeChange(val) {
            this.limit = val;
            this.query();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.query();
        },
        handleSelectionChange(val) {
            this.selectTableData = val;
        }
    }
};
</script>

<style lang="scss" scoped></style>

 文章到此结束，希望对你有所帮助~~