vue + element |
您所在的位置:网站首页 › 前端实现导出功能 › vue + element |
vue + element-ui如何实现导入导出功能
发布时间:2021-07-09 14:59:31
来源:亿速云
阅读:550
作者:小新
栏目:web开发
小编给大家分享一下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 上传组件; //是否支持cookie信息发送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文件) {{ scope.row.date }} 切换第二、第三行的选中状态 取消选择 导入 导出 {{uploadTip}} 只能上传excel文件 下载模板 导入失败 失败原因 第{{error.rowIdx + 1}}行,错误:{{error.column}},{{error.value}},{{error.errorInfo}} import * as scheduleApi from '@/api/schedule' export default { data() { return { tableData3: [ { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-08", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-06", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-07", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" } ], multipleSelection: [], importUrl:'www.baidu.com',//后台接口config.admin_url+'rest/schedule/import/' importHeaders:{ enctype:'multipart/form-data', cityCode:'' }, name: 'import', fileList: [], withCredentials: true, processing: false, uploadTip:'点击上传', importFlag:1, dialogImportVisible:false, errorResults:[] }; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { //复选框选择回填函数,val返回一整行的数据 this.multipleSelection = val; }, importData() { this.importFlag = 1 this.fileList = [] this.uploadTip = '点击上传' this.processing = false this.dialogImportVisible = true }, outportData() { scheduleApi.downloadTemplate() }, handlePreview(file) { //可以通过 file.response 拿到服务端返回数据 }, handleRemove(file, fileList) { //文件移除 }, beforeUpload(file){ //上传前配置 this.importHeaders.cityCode='上海'//可以配置请求头 let excelfileExtend = ".xls,.xlsx"//设置文件格式 let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase(); if (excelfileExtend.indexOf(fileExtend) { //创建一个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() }) }以上是“vue + element-ui如何实现导入导出功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道! 推荐阅读: vue路由跳转的三种方式 如何在Vue中对Axios进行封装?免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue element-ui 上一篇新闻:Vue中怎么设置路由导航菜单栏高亮 下一篇新闻:vue.js中created方法的作用是什么 猜你喜欢 sass和bootstrap有什么区别 HTML5怎样实现图片无限加载瀑布流效果 Shell逐行处理文本求和的示例分析 这么在Spring Cloud中使用Sleuth JavaScript运算符的示例分析 Java中原型模式的示例分析 JavaScript中回调、Promise和Async/Await的示例分析 2021最新TIOBE编程语言排行榜 Spring中如何进行日常Bug排查 Javascript中运算符的示例分析 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |