element-ui實作導入導出
這次帶給大家element-ui實作導入導出，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>
<p>
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
border
style="width: 80%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<p style="margin-top: 20px">
<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
<el-button type="primary" @click="importData">导入</el-button>
<el-button type="primary" @click="outportData">导出</el-button>
</p>
<!-- 导入 -->
<el-dialog title="导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
<p :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}">
<el-upload class="upload-demo"
:action="importUrl"
:name ="name"
:headers="importHeaders"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-error="uploadFail"
:on-success="uploadSuccess"
:file-list="fileList"
:with-credentials="withCredentials">
<!-- 是否支持发送cookie信息 -->
<el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>
<p slot="tip" class="el-uploadtip">只能上传excel文件</p>
</el-upload>
<p class="download-template">
<a class="btn-download" @click="download">
<i class="icon-download"></i>下载模板</a>
</p>
</p>
<p :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}" >
<p class="failure-tips">
<i class="el-icon-warning"></i>导入失败</p>
<p class="failure-reason">
<h4>失败原因</h4>
<ul>
<li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}行，错误：{{error.column}},{{error.value}},{{error.errorInfo}}</li>
</ul>
</p>
</p>
</el-dialog>
<!-- 导出 -->
</p>
</template>
<script>
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) <= -1) {
this.$message.error('文件格式错误')
return false
}
this.uploadTip = '正在处理中...'
this.processing = true
},
//上传错误
uploadFail(err, file, fileList) {
this.uploadTip = '点击上传'
this.processing = false
this.$message.error(err)
},
//上传成功
uploadSuccess(response, file, fileList) {
this.uploadTip = '点击上传'
this.processing = false
if (response.status === -1) {
this.errorResults = response.data
if (this.errorResults) {
this.importFlag = 2
} else {
this.dialogImportVisible = false
this.$message.error(response.errorMsg)
}
} else {
this.importFlag = 3
this.dialogImportVisible = false
this.$message.info('导入成功')
this.doSearch()
}
},
//下载模板
download() {
//调用后台模板方法,和导出类似
scheduleApi.downloadTemplate()
},
}
};
</script>
<style scoped>
.hide-dialog{
display:none;
}
</style>5.js檔,呼叫介面
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()
})
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是element-ui實作導入導出的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
抖音私訊表情包怎麼弄到微信？私訊表情包怎麼匯出？
Mar 21, 2024 pm 10:01 PM
隨著社群媒體的不斷興起，抖音作為一款備受歡迎的短影片平台，吸引了大量用戶的青睞。在抖音上，使用者不僅可以展現自己的生活，還能與其他使用者互動。在這種互動中，表情包逐漸成為使用者表達情感的重要方式。一、抖音私訊表情包怎麼弄到微信？首先，要在抖音平台上取得私訊表情包，需要登入抖音帳號，然後瀏覽並選擇喜歡的表情包，可以選擇傳送給好友或自己收藏。在抖音收到表情包後，可以透過私訊介面長按該表情包，然後選擇「加入表情」功能。這樣，就可以將這個表情包加入抖音的表情庫中。 3.接下來，我們需要將抖音表情庫中的
華為手機如何實現雙微信登入？
Mar 24, 2024 am 11:27 AM
華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同
xmind文件怎麼匯出為pdf文件
Mar 20, 2024 am 10:30 AM
xmind是一款非常實用的心智圖軟體，它是利用人們的思維和靈感製作出來的導圖形式，我們在製作完xmind檔案通常會把它轉換成pdf檔格式，以方便大家傳播使用，那麼xmind檔怎麼匯出為pdf檔呢？以下就是具體操作步驟可以供大家參考。 1.首先我們來示範如何匯出心智圖為PDF文件。選擇【檔案】-【匯出】功能按鈕。 2.在新出現的介面中選擇【PDF文件】並點選【下一步】按鈕。 3.在匯出介面選擇設定：紙張尺寸、方向、解析度和文件儲存位置。完成設定後點選【完成】按鈕。 4.如果點選【完成】按鈕後
PHP程式設計指南：實作斐波那契數列的方法
Mar 20, 2024 pm 04:54 PM
程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元
酷家樂怎麼匯出剖面圖_酷家樂匯出剖面圖方法
Apr 02, 2024 pm 06:01 PM
1.先在酷家樂中開啟要處理的設計方案，點選上面的圖面清單下的施工圖。 2、然後點選選擇全彩平面圖。 3.接著在圖紙中把不要的家具隱藏，只留下需要導出的家具。 4、最後點選下載即可。
如何在華為手機上實現微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App
掌握Golang如何實現遊戲開發的可能性
Mar 16, 2024 pm 12:57 PM
在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統
如何在Golang中實現精確除法運算
Feb 20, 2024 pm 10:51 PM
在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算
