How to implement import and export in vue + element-ui

Element-UI is a desktop UI framework based on Vue.js 2.0 launched by the Ele.me front-end team. The corresponding framework for mobile phones is Mint UI. The following article mainly introduces you to the use of vue element- Friends who need information on how to implement concise import and export functions in UI can refer to it.

Preface

As we all know, ElementUI is a relatively complete UI library, but using it requires a bit of Vue foundation. Before starting the main text of this article, let's take a look at the installation method.

Install ElementUI module

cnpm install element-ui -S

Introduce into main.js

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

Global installation

Vue.use(ElementUI)

Remember to reinstall when we finish the installation Run, cnpm run dev , now you can use elementUI directly.

vue element-ui import and export function

1. Data display in the front-end backend management system generally uses tables, and the tables will involve Import and export;

2. Import is using the Upload upload component of element-ui;

//是否支持cookie信息发送

3. Export is using an object blob of file; get the data by calling the background interface, and then Use data to instantiate the blob, and use the href attribute of the a tag to link to the blob object

 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. Paste the complete code of the entire small demo, which can be used directly in the background development (vue file)

5.js file, calling interface

import axios from 'axios'
// 下载模板
 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()
  })
 }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement table paging in vue element

How to implement recording and playback recording functions in WeChat applet

Nuxt.js framework (detailed tutorial)

How to implement a rolling digital clock in JS CSS

How to achieve the centered floating effect of pictures in JS

How to use the laydate.js date plug-in in Angular4.0

In jQuery How to implement online customer service function

The above is the detailed content of How to implement import and export in vue + element-ui. For more information, please follow other related articles on the PHP Chinese website!