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表(附实战)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++引用10分钟入门教程

我们知道&#xff0c;参数的传递本质上是一次赋值的过程&#xff0c;赋值就是对内存进行拷贝。所谓内存拷贝&#xff0c;是指将一块内存上的数据复制到另一块内存上。 对于像 char、bool、int、float 等基本类型的数据&#xff0c;它们占用的内存往往只有几个字节&#xff0c;对…

深入浅出AI落地应用分析:国内Top10应用

接下来会每周集中体验一些通用或者垂直的AI落地应用&#xff0c;主要以一些全球或者国外国内排行较前的产品为研究对象&#xff0c;「AI 产品榜&#xff1a; aicpb.com」以专题的方式在博客进行分享。 1. 文心一言 产品链接&#xff1a;https://yiyan.baidu.com/ 产品介绍&…

面向对象编程中类概念的理解和使用

1、使用类概念的原因和好处 面向对象编程中的类是构建复杂软件系统的核心元素&#xff0c;它提供了一种组织代码的方式&#xff0c;有助于创建更稳定、可复用、可扩展以及易于理解和维护的程序结构。 它通过以下核心特性提供了稳定、可复用、可扩展且易于理解和维护的程序结构&…

UE5 C++ 学习笔记 UBT UHT 和 一些头文件

总结一些似懂非懂的知识点&#xff0c;从头慢慢梳理。 任何一个项目都有创建这些三个.cs。 这个是蓝图转C 这个是本身就是C项目,应该就是多了一个GameModeBase类 Build.cs包含了每个模块的信息&#xff0c;表明了这个项目用到了哪一些模块。该文件里的using UnrealBuilTool 是…

Spring Boot常用注解

在 Spring Boot 中&#xff0c;有许多注解用于简化和标识应用程序的不同方面。以下是一些常用的 Spring Boot 注解&#xff1a; SpringBootApplication&#xff1a; 用于标识主应用程序类。通常与 EnableAutoConfiguration、ComponentScan 和 Configuration 一起使用&#xff0…

c JPEG 1D DCT

步骤&#xff1a; 1. 对yuv 88 数据 8行分别1D DCT 2, 用8行 1D DCT 得到的数据生成中间88 块 Zj 3,对Zj 的8列再 1D DCT 后生成8列,用这8列组合成8*8的2D DCT 系数 准备用此1D DCT程序代替以前写的2D DCT,看能减少多少编码时间。 看网上文章&#xff0c;ffmpeg用…

什么是车载信息娱乐系统和集成驾驶舱

什么是车载信息娱乐系统(IVI)? “车载信息娱乐(IVI)”通过向驾驶员和乘客提供信息和娱乐&#xff0c;为驾驶提供便利和舒适。为了理解这个概念&#xff0c;有必要知道“信息娱乐”的含义。“信息娱乐”是这个市场中使用的一个词&#xff0c;它结合了“信息”和“娱乐”两个词…

中药经方:桂枝汤

桂枝汤&#xff1a; 桂枝10克&#xff0c;白芍10克&#xff0c;生姜二片&#xff0c;炙甘草10克&#xff0c;红枣十枚。 六碗水大火煮成二碗&#xff0c;成人每三小时空腹时喝一碗&#xff0c;小孩减半。 ——&#xff08;摘自倪海夏《经典药方》&#xff09; 桂枝&am…

5.文本文件编辑命令

1.cat 用于查看纯文本文件&#xff08;内容较少的&#xff09; 加上-n参数&#xff0c;显示内容加行号 [rootlocalhost ~]# cat -n /etc/sysconfig/network-scripts/ifcfg-ens160 2.more 用于查看纯文本文件&#xff08;内容较多的&#xff09; 还可以使用空格键或回车 键…

使用pyechart创建折线图

import json from pyecharts.charts import Line from pyecharts import options# 首先使用文件打开数据 f_us open(Desktop/python/Project/数据可视化/美国.txt,r,encoding"UTF-8") f_rb open(Desktop/python/Project/数据可视化/日本.txt,r,encoding"UTF-8…

Springboot+vue项目部署所有遇到的坑

https://flowus.cn/siriusx/share/0a818075-372b-4948-88af-c75c1d10ceab项目地址及笔记 Spring Boot3VUE3前后端分离项目基于Jwt的校验方案 环境搭建 安装jdk17 安装mysql server https://ubuntu.com/server/docs/databases-mysql 将服务器root账号由系统验证改为密码验证…

SSL证书中RSA算法跟ECC算法的区别

RSA算法和ECC算法指的是SSL证书的加密算法&#xff0c;详细解释如下&#xff1a; RSA算法&#xff1a;国际标准算法&#xff0c;应用较早的算法之一&#xff0c;普遍性更强&#xff0c;同比ECC算法的适用范围更广&#xff0c;兼容性更好&#xff0c;一般采用2048位的加密长度&…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-5+6

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-56 5. An Example 2D例子6. Extended Kalman Filter扩展卡尔曼滤波器&#xff08;EKF&#xff09; 5. An Example 2D例子 6. Extended Kalman Filter扩展卡尔曼…

【centos 安装配置nginx】nginx负载均衡、限流配置

本篇博客将详细介绍如何在centos上安装并配置nginx&#xff0c;步骤详细&#xff0c;希望能帮助到刚接触nginx的伙伴。 一、安装插件 1.安装gcc插件 因为nginx是用c语言编写的&#xff0c;所有要安装gcc。先检查是否已经安装过了。 提示&#xff1a;一般租的服务区里面是都有…

v3的响应式,ref,reactive和生命周期(简写)

vue3笔记 1.两种安装方式 (1)直接创建项目vue3 (2)使用vite 组件传值 1.组件传值的用法 从父组件向子组件传值&#xff1a; <Son :prop1"nmb"></Son> 2.defineprops函数 defineProps函数在setup标签内不需要引入&#xff0c;可直接使用 defineP…

web学习笔记(十六)

目录 HTML5新增标记汇总 1.新增语义化标签 2.新增音频和视频标签 2.1音频标签 audio 2.1视频标签 video 3.新增图像标签 4.新增表单元素和表单控件 HTML5新增标记汇总 1.新增语义化标签 新增语义化标签能够便于开发者阅读和写出更优雅的代码同时让浏览器或是网络爬虫可…

STM32-调用 vTaskStartScheduler API 后出现 HardFault

STM32 移植 FreeRTOS 后调用 vTaskStartScheduler() 后出现 HardFault 异常。 原因分析&#xff1a; FreeRTOS 配置头文件 FreeRTOSConfig.h 中与中断有关的配置和通过系统接口 void NVIC_PriorityGroupConfig(uint32_t NVIC_PriorityGroup) 设置的中断分组冲突。 /* The lo…

leetcode——将x减到0的最小操作数

文章目录 题目解析所用算法算法解析步骤 代码示例 题目解析 题目链接 首先我们先看一下题目如下 我们来解析一下这个题目其实也很简单说的是给你一个整数和一个数组问你每当移除最左边和左右边的某个数字时x也减去该元素的值&#xff0c;问你这里面的最佳方案是什么。&#x…

ChatGPT给出的前端面试考点(html+css+JS)

ChatGPT给出的前端面试考点&#xff08;htmlcssJS&#xff09; HTML HTML是什么&#xff0c;它的主要作用是什么&#xff1f; 什么是DOCTYPE&#xff0c;为什么在HTML文档中使用它&#xff1f; HTML5相对于之前的HTML版本有哪些主要的新特性&#xff1f; 解释语义化HTML的概…

pandas的concat

pandas的concat()函数用于连接&#xff08;合并&#xff09;pandas对象&#xff0c;如Series、DataFrame或Panel&#xff0c;沿指定的轴进行连接。 语法&#xff1a; pandas.concat(objs, axis0, join‘outer’, ignore_indexFalse, keysNone) 参数说明&#xff1a; objs: 要…