码迷,mamicode.com
首页 > 其他好文 > 详细

导出数据

时间:2021-02-05 10:38:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:lse   adf   OLE   loading   文件   复选框   int   width   har   

数据导出

首先是给一个导出的按钮事件

<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 params = {
          tradeNo: this.selectionRows.map((v) => v.tradeNo), // 对应的是后端要传的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"
            ); // 设置下载文件名称
            aLink.click();
            this.$refs.loadElement.appendChild(aLink);
          }
        } catch (error) {}
      } else {
        return this.$message.error("请勾选员工管理导出");
      }
    },
}

引入的js组件 

import dayjs from "dayjs";

技术图片

 

 在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就可以了(大佬封装的,拿着嘚瑟一下)

导出数据

标签:lse   adf   OLE   loading   文件   复选框   int   width   har   

原文地址:https://www.cnblogs.com/yjd-05/p/14373712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!