当前位置： 首页 > news >正文

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

news 2026/2/10 10:34:18

目录

  • 前言
  • 正文

前言

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

对应的前端框架由：【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表（附实战）

相关文章：

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

目录 前言正文 前言 由于个人工作原因&#xff0c;偏全栈&#xff0c;对于前端的总结还有些初出茅庐&#xff0c;后续会进行规整化的总结 对应的前端框架由&#xff1a;【vue】avue-crud表单属性配置&#xff08;表格以及列&#xff09; 最终实现的表单样式如下&#xff1a;…...

编程日记 2024/1/22 18:49:15

分布式锁原理及实现

目录 一、锁的使用场景 二、如何实现控制&#xff1f; 三、单台服务器使用锁的场景 四、分布式锁 五、Redis 实现分布式锁及存在问题 六、Redisson 实现分布式锁 七、定时任务&#xff0b;锁 一、锁的使用场景 1. 控制定时任务执行 定时任务多次执行浪费资源&#xff…...

编程日记 2024/1/22 18:48:14

蓝桥杯官网填空题（海盗与金币）

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 12名海盗在一个小岛上发现了大量的金币&#xff0c;后统计一共有将近5万枚。 登上小岛是在夜里&#xff0c;天气又不好。由于各种原因&#xff0c;有的海盗偷拿了很…...

编程日记 2024/1/22 18:46:12

JavaScript 中JSON 字符串和对象之间的转换。

JSON.stringify() 方法&#xff08;对象转换为 JSON 字符串&#xff09; 用于将 JavaScript 对象转换为 JSON 字符串。 它接受一个 JavaScript 对象作为参数&#xff0c;并返回对应的 JSON 字符串表示。例如&#xff1a; const obj { name: John, age: 25 }; const jsonStr…...

编程日记 2024/1/22 18:45:12

All the stories begin at installation

Before installation, there are some key points about Conan: “Conan is a dependency and package manager for C and C languages.”“With full binary management, Conan can create and reuse any number of different binaries (for different configurations like a…...

编程日记 2024/1/22 18:44:10

Linux文件系统与设备文件

Linux文件系统与设备文件 文章目录 Linux文件系统与设备文件Linux文件操作文件操作系统调用C库文件操作 Linux文件系统Linux文件系统目录结构Linux文件系统与设备驱动file结构体inode结构体file结构体和inode结构体的区别 devfsudev用户空间设备管理sysfs文件系统与Linux设备模…...

编程日记 2024/1/22 18:36:03

QT的绘图系统QPainterDevice与文件系统QIODevice

QT的绘图系统&#xff08;QPainterDevice&#xff09;与文件系统&#xff08;QIODevice&#xff09; 文章目录 1、Qt 的绘图系统1、QPainter的使用2、QPen(画笔&#xff09;及QBursh&#xff08;画刷&#xff09;3、手动更新窗口4、绘图设备1、四种绘图设备的 区别2、 QBitmap3…...

编程日记 2024/1/22 18:35:02

Spark流式读取文件数据

流式读取文件数据 from pyspark.sql import SparkSession ss SparkSession.builder.getOrCreate() # todo 注意1&#xff1a;流式读取目录下的文件 --》一定一定要是目录&#xff0c;不是具体的文件&#xff0c;# 目录下产生新文件会进行读取# todo 注意点2&#xff1…...

编程日记 2024/1/22 18:33:00

Leetcode 3011. Find if Array Can Be Sorted

Leetcode 3011. Find if Array Can Be Sorted 1. 解题思路2. 代码实现 题目链接&#xff1a;3011. Find if Array Can Be Sorted 1. 解题思路 这一题挺简单的&#xff0c;就是一个分组进行排序考察&#xff0c;我们将相邻且bit set相同的元素划归到同一组&#xff0c;然后进…...

编程日记 2024/1/22 18:30:58

Databend 开源周报第 129 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持标准流 标…...

编程日记 2024/1/22 18:29:57

python 正则表达式学习(1)

正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的检查一个字符串是否与某种模式匹配。 1. 特殊符号 1.1 符号含义 模式描述^匹配字符串的开头$匹配字符串的末尾.匹配任意字符&#xff0c;除了换行符&#xff0c;当re.DOTALL标记被指定时&#xff0c;则可以匹配包…...

编程日记 2024/1/22 18:28:56

安全防御-基础认知

目录 安全风险能见度不足&#xff1a; 常见的网络安全术语 &#xff1a; 常见安全风险 网络的基本攻击模式&#xff1a; 病毒分类&#xff1a; 病毒的特征&#xff1a; 常见病毒&#xff1a; 信息安全的五要素&#xff1a; 信息安全的五要素案例 网络空间&#xff1a…...

编程日记 2024/1/22 18:26:54

各省税收收入、个人和企业所得税数据，Shp、excel格式，2000-2021年

基本信息. 数据名称: 各省税收收入、个人和企业所得税数据 数据格式: Shp、excel 数据时间: 2000-2021年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1sssr_2021税收收入&#xff08;亿元&am…...

编程日记 2024/1/22 18:25:53

Vue记录

vue2、vue3记录&#xff0c;参考地址&#xff1a;尚硅谷Vue项目实战硅谷甄选&#xff0c;vue3项目TypeScript前端项目一套通关_哔哩哔哩_bilibili vue2记录 经典vue2结构 index.vue&#xff1a; <template><div>...</div> </template><script>…...

编程日记 2024/1/22 18:23:51

【JavaEE进阶】 Spring Boot⽇志

文章目录 &#x1f38b;关于日志&#x1f6a9;为什么要学习⽇志&#x1f6a9;⽇志的⽤途&#x1f6a9;日志的简单使用 &#x1f384;打印⽇志&#x1f6a9;程序中得到⽇志对象&#x1f6a9;使⽤⽇志对象打印⽇志 &#x1f38d;⽇志格式的说明&#x1f6a9;⽇志级别的作用&#…...

编程日记 2024/1/22 18:21:48

《GitHub Copilot 操作指南》课程介绍

第1节&#xff1a;GitHub Copilot 概述 一、什么是 GitHub Copilot 什么是 GitHub Copilot GitHub Copilot是GitHub与OpenAI合作开发的编程助手工具&#xff0c;利用机器学习模型生成代码建议。它集成在开发者的集成开发环境&#xff08;IDE&#xff09;中&#xff0c;可以根…...

编程日记 2024/1/22 18:20:47

结构体(C语言)

结构体 1.结构体基础知识: //结构是一些值的集合,这些值称为成员变量. // 结构的每个成员可以是不同类型的变量. 2.结构的定义 struct peo { char name[10];//姓名 char tele[12];//电话 char gender[5];//性别 int high;//身高 }; struct stu { struct…...

编程日记 2024/1/22 18:19:46

HNU-数据挖掘-实验1-实验平台及环境安装

数据挖掘课程实验实验1 实验平台及环境安装 计科210X 甘晴void 202108010XXX 文章目录 数据挖掘课程实验<br>实验1 实验平台及环境安装实验背景实验目标实验步骤1.安装虚拟机和Linux平台&#xff0c;熟悉Ubuntu环境。2.在Linux平台上搭建Python平台&#xff0c;并安装…...

编程日记 2024/1/22 18:17:45

JavaEE中的监听器的作用和工作原理

在JavaEE&#xff08;Java Platform, Enterprise Edition&#xff09;中&#xff0c;监听器&#xff08;Listener&#xff09;是一种重要的组件&#xff0c;用于监听和响应Web应用程序中的事件。监听器的作用是在特定的事件发生时执行一些自定义的逻辑。常见的监听器包括Servle…...

编程日记 2024/1/22 18:11:38

Webpack5入门到原理1：前言

为什么需要打包工具&#xff1f; 开发时&#xff0c;我们会使用框架&#xff08;React、Vue&#xff09;&#xff0c;ES6 模块化语法&#xff0c;Less/Sass 等 css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法&#xf…...

编程日记 2024/1/22 18:09:36

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2026/1/24 6:44:11

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07