How to implement import and export in vue + element-ui-JS Tutorial-php.cn

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

Copy after login

Introduce into main.js

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

Copy after login

Global installation

Vue.use(ElementUI)

Copy after login

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信息发送

Copy after login

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() }) }

Copy after login

4. Paste the complete code of the entire small demo, which can be used directly in the background development (vue file)

Copy after login

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() }) }

Copy after login

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

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!