這篇文章主要介紹了vue+element-ui怎么實(shí)現(xiàn)導(dǎo)入導(dǎo)出功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue+element-ui怎么實(shí)現(xiàn)導(dǎo)入導(dǎo)出功能文章都會(huì)有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)公司是專業(yè)的成安網(wǎng)站建設(shè)公司，成安接單;提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行成安網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

安裝ElementUI模塊

cnpm install element-ui -S

在main.js中引入

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

全局安裝

Vue.use(ElementUI)

當(dāng)我們安裝完記得重新運(yùn)行，cnpm run dev ，現(xiàn)在就可以直接使用elementUI了。

vue + element-ui導(dǎo)入導(dǎo)出功能

1.前段后臺(tái)管理系統(tǒng)中數(shù)據(jù)展示一般都是用表格,表格會(huì)涉及到導(dǎo)入和導(dǎo)出;

2.導(dǎo)入是利用element-ui的Upload 上傳組件;

//是否支持cookie信息發(fā)送

3.導(dǎo)出是利用file的一個(gè)對(duì)象blob;通過調(diào)用后臺(tái)接口拿到數(shù)據(jù),然后用數(shù)據(jù)來實(shí)例化blob,利用a標(biāo)簽的href屬性鏈接到blob對(duì)象

 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   },
   responseType: 'arraybuffer'
  }).then((response) => {
   //創(chuàng)建一個(gè)blob對(duì)象,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.貼上整個(gè)小demo的完整代碼,在后臺(tái)開發(fā)可以直接拿過去用(vue文件)

 
 
 
 
 
 
 
 切換第二、第三行的選中狀態(tài)
 取消選擇
 導(dǎo)入
 導(dǎo)出