vue+element-ui实现简洁的导入导出功能资源-CSDN下载

5星 · 超过95%的资源 66 浏览量 2020-10-18 21:30:05 上传评论收藏 67KB PDF 举报

资源推荐

资源详情

资源评论

vue + element-ui实现简洁的导入导出功能实现简洁的导入导出功能

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这

篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以

参考下。

前言前言

众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安

装的方法吧。

安装安装ElementUI模块模块

cnpm install element-ui -S

在main.js中引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

全局安装

Vue.use(ElementUI)

当我们安装完记得重新运行，cnpm run dev ，现在就可以直接使用elementUI了。

vue + element-ui导入导出功能导入导出功能

1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;

2.导入是利用element-ui的Upload 上传组件;

<el-upload class="upload-demo"

:action="importUrl"//上传的路径

:name ="name"//上传的文件字段名

:headers="importHeaders"//请求头格式

:on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据

:on-remove="handleRemove"//文件移除

:before-upload="beforeUpload"//上传前配置

:on-error="uploadFail"//上传错误

:on-success="uploadSuccess"//上传成功

:file-list="fileList"//上传的文件列表

:with-credentials="withCredentials">//是否支持cookie信息发送

</el-upload>

3.导出是利用file的一个对象blob;通过调用后台接口拿到数据,然后用数据来实例化blob,利用a标签的href属性链接到blob对象

export const downloadTemplate = function (scheduleType) {

axios.get('/rest/schedule/template', {

params: {

"scheduleType": scheduleType

},

responseType: 'arraybuffer'

}).then((response) => {

//创建一个blob对象,file的一种

let blob = new Blob([response.data], { type: 'application/x-xls' })

let link = document.createElement('a')

link.href = window.URL.createObjectURL(blob)

//配置下载的文件名

link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'

link.click()

})

}

4.贴上整个小demo的完整代码,在后台开发可以直接拿过去用(vue文件)

<template>

<div>

<el-table

ref="multipleTable"

:data="tableData3"

tooltip-effect="dark"

border

style="width: 80%"

@selection-change="handleSelectionChange">

<el-table-column

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

章满莫

2023-06-10

这篇文章的作者更关注代码的实际应用，而非过度的夸张效果。
田仲政

2023-06-10

这篇文章解释了如何使用vue和element-ui创建一个简洁的导入导出功能，真正做到了实用至上。
小明斗

2023-06-10

这篇文章的作者向我们展示了如何运用vue和element-ui组件进行高效的前端开发。
城北伯庸

2023-06-10

我很喜欢这篇文章介绍的数据导入导出方法。
我要WhatYouNeed

2023-06-10

借助这篇文章，我实现了一个很棒的数据导入导出模块。

前往

页

weixin_38744526

粉丝: 16

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip