沈阳cms建站模板,网站建设系统下载,html网页框架,重庆公司地址目录 前言正文 前言
由于个人工作原因#xff0c;偏全栈#xff0c;对于前端的总结还有些初出茅庐#xff0c;后续会进行规整化的总结
对应的前端框架由#xff1a;【vue】avue-crud表单属性配置#xff08;表格以及列#xff09;
最终实现的表单样式如下#xff1a;… 目录 前言正文 前言
由于个人工作原因偏全栈对于前端的总结还有些初出茅庐后续会进行规整化的总结
对应的前端框架由【vue】avue-crud表单属性配置表格以及列
最终实现的表单样式如下
点击导入按钮 出现的画面如下 正文
直奔主题其vue的按钮样式
templatebasic-containerel-form :inlinetrue refformInline :modelformInline label-width80pxavue-crud :optionoption:table-loadingloading:datadata:pagepage:permissionpermissionList:before-openbeforeOpenv-modelformrefcrudrow-updaterowUpdaterow-saverowSaverow-delrowDelsearch-changesearchChangesearch-resetsearchResetselection-changeselectionChangecurrent-changecurrentChangesize-changesizeChangerefresh-changerefreshChangeon-loadonLoadcurrent-row-changehandleCurrentRowChangerow-clickhandleRowClicktemplate slotmenuLeftel-button typesuccesssizesmallplainiconel-icon-upload2clickhandleImport一键导入/el-button/template/avue-crudel-dialog title导入append-to-body:visible.syncexcelBoxwidth555pxavue-form :optionexcelOption v-modelexcelForm :upload-afteruploadAftertemplate slotexcelTemplateel-button typeprimary clickhandleTemplate点击下载i classel-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表附实战
