vue element 导入出错 弹窗提示

 

js代码

successF(response, file, fileList) {

if (response.code === "success") {

this.$message.success("导入成功");

this.getList();

} else {

this.getList();

this.errorLists = response.data;

if (this.errorLists && this.errorLists.length > 0) {

this.dialogFormErrorVisible = true;

}

this.$message.error(response.message || "导入出错");

}

},

 

html

<el-upload

class="upload-demo"

action="api/lotus/sp/stocktaking/excel/import"

name="excel"

:on-success="successF"

:show-file-list="false"

:file-list="fileList"

>

<el-button type="primary" ref="upload">导入任务</el-button>

</el-upload>

 

错误信息弹窗

<el-dialog

title="错误信息"

:visible.sync="dialogFormErrorVisible"

width="800px"

class="demo-base-dialog dialog-input"

:close-on-click-modal="false"

>

<el-table :data="errorLists" border :stripe="true" max-height="250">

<el-table-column label="序号" width="68" fixed>

<template slot-scope="scope">{{scope.$index + 1}}</template>

</el-table-column>

<el-table-column label="错误原因" min-width="108" show-overflow-tooltip>

<template slot-scope="scope">{{scope.row.errorMsg}}</template>

</el-table-column>

</el-table>

<el-row slot="footer">

<el-col :span="24" class="align-right margin-top16">

<el-button @click="dialogFormErrorVisible=false">关 闭</el-button>

</el-col>

</el-row>

</el-dialog>

data里面定义

dialogFormErrorVisible: false

errorLists: [],

fileList: []