导出数据
数据导出
首先是给一个导出的按钮事件
<el-button type="primary" @click="clickExport">导出</el-button>
表格给一个复选框进行当前的导出
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange" // 复选框事件
>
// 这个是要写的 不写复选框出不来滴
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" align="center" width="80">
</el-table-column>
</el-table>
在methods方法中
methods: {
handleSelectionChange(selection) {
console.log(selection); // 当我们点击的时候 可以查看当前的这条数据
this.selectionRows = selection;
},
//导出
async clickExport() { // 函数对应的是button按钮
if (this.selectionRows.length > 0) {
const downloadFileName = dayjs().format("YYYY-MM-DD"); // dayjs引入的组件
// 这一行也可以写成 下面两行的形式
let time = new Date().getTime();
let YMD = util.timestampToTime(time); // 导出结果是20213101501 一串数字形式（有的要求格式这样）
// timestampToTime 是引入的js文件
let params = {
ids: this.selectionRows.map((v) => v.id), // 对应的是后端要传的id字段
};
console.log(params);
try {
const data = await exportFinanceSerial(params);
console.log(data);
if (data) {
const aLink = document.createElement("a");
const blob = new Blob(["\uFEFF" + data], {
type: "text/csv;charset=utf-8",
});
aLink.href = URL.createObjectURL(blob);
aLink.setAttribute(
"download",
"导出的名字-" + dayjs().format("YYYY-MM-DD") + ".csv" // 这里的就换成 YMD
); // 设置下载文件名称
aLink.click();
this.$refs.loadElement.appendChild(aLink);
}
} catch (error) {}
} else {
return this.$message.error("请勾选员工管理导出");
}
},
}
引入的js组件
import dayjs from "dayjs";
// 或者
import timeStamp from "@/utils/timeStamp";
// timeStamp js文件
export default {
/**
* 时间戳转换结果：YYYY-MM-DD-hh-mm-ss
* @param {Number} timestamp
*/
timestampToTime(timestamp) {
let date = timestamp + '';
if(date.length > 10){
date = new Date(timestamp)
}else{
date = new Date(timestamp * 1000);
}
var Y = date.getFullYear();
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + h + m + s;
},
}
在node_modules里面的dayjs
/// <reference path="./locale/index.d.ts" />
export = dayjs;
declare function dayjs (date?: dayjs.ConfigType): dayjs.Dayjs
declare function dayjs (date?: dayjs.ConfigType, format?: dayjs.OptionType, strict?: boolean): dayjs.Dayjs
declare function dayjs (date?: dayjs.ConfigType, format?: dayjs.OptionType, locale?: string, strict?: boolean): dayjs.Dayjs
declare namespace dayjs {
export type ConfigType = string | number | Date | Dayjs
export type OptionType = { locale?: string, format?: string, utc?: boolean } | string | string[]
type UnitTypeShort = 'd' | 'M' | 'y' | 'h' | 'm' | 's' | 'ms'
export type UnitType = 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'month' | 'year' | 'date' | UnitTypeShort;
export type OpUnitType = UnitType | "week" | 'w';
export type QUnitType = UnitType | "quarter" | 'Q';
class Dayjs {
constructor (config?: ConfigType)
clone(): Dayjs
isValid(): boolean
year(): number
year(value: number): Dayjs
month(): number
month(value: number): Dayjs
date(): number
date(value: number): Dayjs
day(): number
day(value: number): Dayjs
hour(): number
hour(value: number): Dayjs
minute(): number
minute(value: number): Dayjs
second(): number
second(value: number): Dayjs
millisecond(): number
millisecond(value: number): Dayjs
set(unit: UnitType, value: number): Dayjs
get(unit: UnitType): number
add(value: number, unit: OpUnitType): Dayjs
subtract(value: number, unit: OpUnitType): Dayjs
startOf(unit: OpUnitType): Dayjs
endOf(unit: OpUnitType): Dayjs
format(template?: string): string
diff(date: ConfigType, unit?: QUnitType | OpUnitType, float?: boolean): number
valueOf(): number
unix(): number
daysInMonth(): number
toDate(): Date
toJSON(): string
toISOString(): string
toString(): string
utcOffset(): number
isBefore(date: ConfigType, unit?: OpUnitType): boolean
isSame(date: ConfigType, unit?: OpUnitType): boolean
isAfter(date: ConfigType, unit?: OpUnitType): boolean
locale(): string
locale(preset: string | ILocale, object?: Partial<ILocale>): Dayjs
}
export type PluginFunc<T = unknown> = (option: T, c: typeof Dayjs, d: typeof dayjs) => void
export function extend<T = unknown>(plugin: PluginFunc<T>, option?: T): Dayjs
export function locale(preset?: string | ILocale, object?: Partial<ILocale>, isLocal?: boolean): string
export function isDayjs(d: any): d is Dayjs
export function unix(t: number): Dayjs
const Ls : { [key: string] : ILocale }
}
/// <reference path="./types.d.ts" />
declare module 'dayjs/locale/*' {
namespace locale {
interface Locale extends ILocale {}
}
const locale: locale.Locale
export = locale
}
declare interface ILocale {
name: string
weekdays?: string[]
months?: string[]
weekStart?: number
weekdaysShort?: string[]
monthsShort?: string[]
weekdaysMin?: string[]
ordinal?: (n: number) => number | string
formats: Partial<{
LT: string
LTS: string
L: string
LL: string
LLL: string
LLLL: string
}>
relativeTime: Partial<{
future: string
past: string
s: string
m: string
mm: string
h: string
hh: string
d: string
dd: string
M: string
MM: string
y: string
yy: string
}>
}
这引入dayjs有点乱。就写一个文件，把这些cv就可以了（大佬封装的，拿着嘚瑟一下）
