Vue以弹窗形式实现导入功能

前言

由于个人工作原因，偏全栈，对于前端的总结还有些初出茅庐，后续会进行规整化的总结

对应的前端框架由：【vue】avue-crud表单属性配置（表格以及列）

最终实现的表单样式如下：

点击导入按钮

出现的画面如下：

正文

直奔主题，其vue的按钮样式：

<template><basic-container><el-form :inline="true" ref="formInline" :model="formInline" label-width="80px"><avue-crud :option="option":table-loading="loading":data="data":page="page":permission="permissionList":before-open="beforeOpen"v-model="form"ref="crud"@row-update="rowUpdate"@row-save="rowSave"@row-del="rowDel"@search-change="searchChange"@search-reset="searchReset"@selection-change="selectionChange"@current-change="currentChange"@size-change="sizeChange"@refresh-change="refreshChange"@on-load="onLoad"@current-row-change="handleCurrentRowChange"@row-click="handleRowClick"><template slot="menuLeft"><el-button type="success"size="small"plainicon="el-icon-upload2"@click="handleImport">一键导入</el-button></template></avue-crud><el-dialog title="导入"append-to-body:visible.sync="excelBox"width="555px"><avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter"><template slot="excelTemplate"><el-button type="primary" @click="handleTemplate">点击下载<i class="el-icon-download el-icon--right"></i></el-button></template></avue-form></el-dialog></basic-container>
</template>

对应的样式如下：

export default {data() {return {form: {},query: {},loading: true,page: {pageSize: 10,currentPage: 1,total: 0},// 导入的按钮excelForm: {},excelBox:false,excelOption: {submitBtn: false,emptyBtn: false,column: [{label: '模板上传',prop: 'excelFile',type: 'upload',drag: true,loadText: '模板上传中，请稍等',span: 24,propsHttp: {res: 'data'},tip: '请上传 .xls,.xlsx 标准格式文件',action: '/此处为api的接口下载'},{label: '模板下载',prop: 'excelTemplate',formslot: true,span: 24,}]},

其主要方法如下：

 methods: {// 执行模板下载handleTemplate() {window.open(`http://10.197.0.67:10086/monthplan.xlsx`);},// 上传之后处理的事情uploadAfter(res, done, loading, column) {window.console.log(res);this.excelBox = false;this.onLoadChild(this.pageChild);done();},// 点击导入handleImport() {this.excelBox = true;},

更多的导入功能由后端实现，可结合我这篇文章：详细讲解Java使用EasyExcel函数来操作Excel表（附实战）