vue项目中导出按钮及功能 vue项目使用XLSX

最新推荐文章于 2024-01-12 15:11:17 发布

周嘻嘻！

最新推荐文章于 2024-01-12 15:11:17 发布

阅读量357

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44895856/article/details/131597416

版权

1、安装XLSX

npm install XLSX --s

2、按需引入

import XLSX from 'xlsx'

3、创建一个js文件用来请求表格数据。接口就是表格数据接口

import axios from 'axios'

export function exportList(query) {
  return axios({
    url: '接口地址',
    method: 'get',
    params: query,
  })
}

4、页面中引入接口方法

import { exportList } from '@/api/report/material'

5、页面表格中新增按钮代码

 <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :response="response"
        :pageSize="pageSize"
        :columns="columns"
        :selection.sync="selection"
      >
        <!-- 表头工具栏 -->