vue+elementUI，前端导出表格，去除不需要的表格列

2022-06-17 16:33:47 阅读：338 来源： 互联网

标签：vue 表格 elementUI 导出 tableName let index0 index1

码字不易，转载请注明出处，谢谢~

遇到的问题：前端导出表格，表格中有些列不需要导出，例如操作列之类的。原理是通过ref获取表格列，把不需要导出的表格列数据去除。

解决方案
①先在elementUI的表格组件上挂一个ref，再通过this.ref.table获取到组件的dom

点击查看代码

<el-table
       :data="form.tableDate"
       ref="table"
       border
></el-table>

②使用封装好的getXlsxFile函数，getXlsxFile在第③步，第三步才是重点

点击查看代码

      let ignoreList = ["操作"];
      let tableList = this.form.tableDate;
      let tableName = "导出表格";
      this.getXlsxFile(this.$refs.table, ignoreList, tableList, tableName);

③使用封装好的getXlsxFile函数

点击查看代码

import XLSX from "xlsx";
import FileSaver from "file-saver";

//处理表格数据
//tableRef-表格的ref值
//ignoreList-忽略导出列，例如['操作','产品操作']，表示操作、产品操作这一列不导出
//tableDate-表格数据
//tableName-导出的文件名
//colsList-表格列宽，没有就按默认列宽导出，例如：[{ wch: 5 },{ wch: 5 },...]
//mergesList-合并规则,例如[[e:{r:4,c:0},s:{r:3,c:0}],...]，表示第1列的第4个格子向第1列的第5个格子合并
export function getXlsxFile(tableRef, ignoreList, tableDate, tableName, colsList = [], mergesList = []) {
    let enHeader = [];//英文表头
    let zhHeader = [];//中文表头
    //将表格的dom节点转换成可遍历的数组
    var tableTitle = tableRef.$el
        .querySelector(".el-table__header-wrapper")
        .querySelector(".has-gutter")
        .querySelector("tr").childNodes;
    for (let index0 = 0; index0 < tableTitle.length; index0++) {
        if (
            !ignoreList.includes(
                tableTitle[index0].textContent
            )
        ) {
            //如果不在忽略导出列表，则加到中文表头
            zhHeader.push(tableTitle[index0].textContent);
            for (
                let index1 = 0;
                index1 < tableRef.$children.length;
                index1++
            ) {
                //对应在tableRefName.$children找到和中文匹配的属性英文名
                if (
                    tableRef.$children[index1].label ===
                    tableTitle[index0].textContent
                ) {
                    enHeader.push(tableRef.$children[index1].prop);
                    break;
                }
            }
        } else {
        }
    }
    //定义xlsx的表头，是表格的第一行即中文表头
    let xlsxList = [zhHeader];
    //循环表格数据，将每一行表格数据添加到xlsxList中
    tableDate.map((item, index0) => {
        xlsxList[index0 + 1] = [];
        //按照每行数据都按照定义的英文表头排序
        for (let index1 = 0; index1 < enHeader.length; index1++) {
            xlsxList[index0 + 1].push(item[enHeader[index1]]);
        }
    });
    var wb = XLSX.utils.book_new(); //创建一个空的工作簿
    wb.SheetNames.push(tableName); //加入第一个工作表
    wb.Sheets[tableName] = XLSX.utils.aoa_to_sheet(xlsxList); //给第一个工作表赋值
    wb.Sheets[tableName]["!cols"] = colsList
    wb.Sheets[tableName]["!merges"] = mergesList;


    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], {
                type: "application/octet-stream",
            }),
            //设置导出文件名称
            tableName + "-" + Date.now() + ".xlsx"
        );
    } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
}

标签：vue,表格,elementUI,导出,tableName,let,index0,index1
来源： https://www.cnblogs.com/loveniko/p/16386161.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue+elementUI，前端导出表格，去除不需要的表格列