vuejs导出功能封装table - web建站教程手机端

1、建一个export.js

import dateTime from "@/utils/dateTime.js"; //封装当前时间组件
import {
    Message
} from 'element-ui';
export default {
    //导出
    excel(tableCol, exportData, title, monthName) {
        if (exportData.length == 0) {
            Message.warning({ message: '当前暂无数据可导出！' });
            return
        }
        require.ensure([], () => {
            const { export_json_to_excel } = require("@/vendor/Export2Excel");
            let tableLabel = [];
            let tableProp = [];
            tableCol.forEach(item => {
                tableLabel.push(item.label);
                tableProp.push(item.prop);
            });
            const tHeader = tableLabel;
            const filterVal = tableProp;
            const list = exportData; //把data里的exportData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(
                tHeader,
                data,
                title + dateTime.getBeforeDate(0)
            );
        });
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
    },
}

2、vuejs页面中导出按钮

data() {
    return {
	  exportExcelData: [],
      tableCol: [
        {
          width: "100",
          prop: "invoiceNo",
          label: "发票号"
        },
        {
          width: "140",
          prop: "invoiceDate",
          label: "开票时间"
        },
        {
          width: "70",
          prop: "invoicePrice",
          label: "开票金额"
        },
        {
          width: "90",
          prop: "returnMonenyStatus",
          label: "回款状态"
        },
        {
          width: "140",
          prop: "returnMonenyDate",
          label: "回款时间"
        },
        {
          width: "70",
          prop: "returnMonenyPrice",
          label: "回款金额"
        },
        {
          width: "140",
          prop: "createTime",
          label: "创建时间"
        }
      ],
	}
}
//导出excel
async exportExcel() {
  await this.getListData("excel"); //执行列表接口
  exportD.excel(
	this.tableCol, //获取头部参数
	this.exportExcelData, //获取列表数据
	this.$route.meta.title //获取当前标题
  );
},

vuejs实现element-plus脚手架的引入介绍

标签： vuejs, 导出, 封装

上面是“vuejs导出功能封装table”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2053.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！