element-ui php,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 上传组件;

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

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文件)

ref="multipleTable"

:data="tableData3"

tooltip-effect="dark"

border

style="width: 80%"

@selection-change="handleSelectionChange">

type="selection"

width="55">

label="日期"

width="120">

{{ scope.row.date }}

prop="name"

label="姓名"

width="120">

prop="address"

label="地址"

show-overflow-tooltip>

切换第二、第三行的选中状态

取消选择

导入

导出

: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">

{{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) <= -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()

},

}

};

.hide-dialog{

display:none;

}

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中文网其它相关文章！

推荐阅读：