<template> <div> <div> <!--导出文件名称--> <div> <label>Filename:</label> <el-input v-model="filename" placeholder="请输入导出文件名" prefix-icon="el-icon-document" /> </div> <!--设置表格导出的宽度是否自动--> <div> <label>Cell Auto-Width:</label> <el-radio-group v-model="autoWidth"> <el-radio :label="true" border>True</el-radio> <el-radio :label="false" border>False</el-radio> </el-radio-group> </div> <!--导出文件后缀类型--> <div> <label>Book Type:</label> <el-select v-model="bookType"> <el-option v-for="item in options" :key="item" :label="item" :value="item"/> </el-select> </div> <!--导出文件--> <div> <el-button :loading="downloadLoading" type="primary" icon="document" @click="handleDownload">export Excel</el-button> </div> </div> <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row > <el-table-column label="序号"> <template slot-scope="scope">{{ scope.$index }}</template> </el-table-column> <el-table-column label="订单号"> <template slot-scope="scope">{{ scope.row.title }}</template> </el-table-column> <el-table-column label="菜品"> <template slot-scope="scope">{{ scope.row.foods }}</template> </el-table-column> <el-table-column label="收银员"> <template slot-scope="scope"> <el-tag>{{ scope.row.author }}</el-tag> </template> </el-table-column> <el-table-column label="金额"> <template slot-scope="scope">{{ scope.row.pageviews }}</template> </el-table-column> <el-table-column label="时间"> <template slot-scope="scope"> <i/> <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> </template> </el-table-column> </el-table> </div> </template> export default { name: "exportExcelDialog", data() { return { // 列表内容 list: null, // loding窗口状态 listLoading: true, // 下载loding窗口状态 downloadLoading: false, // 导出文件名称 filename: "", // 导出表格宽度是否auto autoWidth: true, // 导出文件格式 bookType: "xlsx", // 默认导出文件后缀类型 options: ["xlsx", "csv", "txt"] }; }, methods: { // 导出Excel表格 handleDownload() { this.downloadLoading = true; // 懒加载该用法 import("@/vendor/Export2Excel").then(excel => { // 设置导出表格的头部 const tHeader = ["序号", "订单号", "菜品", "收银员", "金额", "时间"]; // 设置要导出的属性 const filterVal = [ "id", "title", "foods", "author", "pageviews", "display_time" ]; // 获取当前展示的表格数据 const list = this.list; // 将要导出的数据进行一个过滤 const data = this.formatJson(filterVal, list); // 调用我们封装好的方法进行导出Excel 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 === "timestamp") { return this.parseTime(v[j]); } else { return v[j]; } }) ); }, // 过滤时间 parseTime(time, cFormat) { if (arguments.length === 0) { return null; } const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"; let date; if (typeof time === "object") { date = time; } else { if (typeof time === "string" && /^[0-9]+$/.test(time)) { time = parseInt(time); } if (typeof time === "number" && time.toString().length === 10) { time = time * 1000; } date = new Date(time); } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() }; const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key]; // Note: getDay() returns 0 on Sunday if (key === "a") { return ["日", "一", "二", "三", "四", "五", "六"][value]; } if (result.length > 0 && value < 10) { value = "0" + value; } return value || 0; }); return timeStr; } }, mounted() { // 模拟获取数据 setTimeout(() => { this.list = [ { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" }, { timestamp: 1432179778664, author: "Charles", comment_disabled: true, content_short: "mock data", display_time: "1994-05-25 23:37:25", foods: "鸡翅、萝卜、牛肉、红烧大闸蟹、红烧鸡翅", id: 1, image_uri: "https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3", importance: 3, pageviews: 2864, platforms: ["a-platform"], reviewer: "Sandra", status: "published", title: "O20190407135010000000001", type: "CN" } ]; this.listLoading = false; }, 2000); }, filters: { // 过滤时间 parseTime(time, cFormat) { if (arguments.length === 0) { return null; } const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"; let date; if (typeof time === "object") { date = time; } else { if (typeof time === "string" && /^[0-9]+$/.test(time)) { time = parseInt(time); } if (typeof time === "number" && time.toString().length === 10) { time = time * 1000; } date = new Date(time); } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay() }; const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key]; // Note: getDay() returns 0 on Sunday if (key === "a") { return ["日", "一", "二", "三", "四", "五", "六"][value]; } if (result.length > 0 && value < 10) { value = "0" + value; } return value || 0; }); return timeStr; } } }
效果图如下
用法都是看GitHub开源项目的和博客的,自己本身还没有二次封装这样内容的实力,欢迎大佬提出宝贵的意见。