目录
- 前言
- 正文
前言
由于个人工作原因，偏全栈，对于前端的总结还有些初出茅庐，后续会进行规整化的总结
对应的前端框架由：【vue】avue-crud表单属性配置（表格以及列）
最终实现的表单样式如下：
点击导入按钮
出现的画面如下：
正文
直奔主题，其vue的按钮样式：
<template><basic-container><avue-crud :option="option":table-loading="loading":data="data":page.sync="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"><template slot="menuLeft"><el-button type="primary" size="small" @click="handleImpotExcel">导入</el-button> </template></avue-crud><el-dialog title="导入"append-to-body:visible.sync="importExcelBox"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: {},excelOption: {submitBtn: false,emptyBtn: false,column: [{label: '模板上传',prop: 'excelFile',type: 'upload',drag: true,loadText: '模板上传中，请稍等',span: 24,propsHttp: {res: 'data'},tip: '请上传 .xls,.xlsx 标准格式文件',action: '/xxdetail/import'},{label: '模板下载',prop: 'excelTemplate',formslot: true,span: 24,}]},importExcelBox: false,
其主要方法如下：
methods: {handleTemplate() {window.open(`http://ip:10086/excel.xlsx`);},uploadAfter(res, done, loading, column) {window.console.log(res);this.excelBox = false;this.onLoadChild(this.page);done();},handleImpotExcel(){this.importExcelBox = true;},更多的导入功能由后端实现，可结合我这篇文章：详细讲解Java使用EasyExcel函数来操作Excel表（附实战）
