【springboot+vue项目(零)】开发项目经验积累(处理问题)

一、VUE+Element UI

(一)elementui下拉框默认值不是对应中文问题

         v-model绑定的值必须是字符串,才会显示默认选中对应中文,如果是数字,则显示数字,修改为:

 handleOpenAddDialog() {
      this.dialogTitle = "添加信息";
      this.dialogAction = "添加";
      this.addOrEditForm = {
        uploadtime: this.getCurrentDateTime(),
        status: "0"
      };
      this.dialogVisible = true;

    },

         如果 status: 0 ,则显示为 0 , 如果  status: "0", 则显示为 "正常"。

相对于的修改弹出框也要修改为:

/**** 【6.1】修改弹出框 ****/
openEditDialog(row) {
  this.dialogTitle = "修改信息";
  this.dialogAction = "保存";
  this.addOrEditForm = Object.assign({}, row);
  this.addOrEditForm.status = row.status === 0 ? "正常" : "异常"; // 根据 row.status 的值设置 addOrEditForm.status 的初始值
  this.dialogVisible = true;
},

(二)无法连续上传导入文件的问题

        无法连续上传导入的问题,可能是由于文件选择对话框在每次上传后没有重置所导致的。可以尝试在文件上传成功后重置文件选择框,以便用户能够继续选择和上传文件。

        在handleFileChange方法的成功回调中,可以添加以下代码来重置文件选择框:

event.target.value = ""; // 重置文件选择框的值

例如:

handleFileChange(event) {
  const files = event.target.files;

  if (files.length > 0) {
    const formData = new FormData();
    formData.append("file", files[0]); // 将文件添加到 FormData 对象中

    // 调用上传接口进行文件上传操作
    // 在这里需要根据实际情况替换成自己的上传接口
    this.$API.upload
      .uploadFiles(formData)
      .then((response) => {
        console.log("文件上传成功", response);
        this.$message.success("文件上传成功"); // 弹出成功消息
        // 刷新数据
        this.getPageList();
        
        // 重置文件选择框
        event.target.value = "";
      })
      .catch((error) => {
        console.error("文件上传失败", error);
        this.$message.error("文件上传失败"); // 弹出失败消息
        // 在这里可以根据需要执行其他操作
      });
  }
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JVS规则引擎和智能BI(自助式数据分析)1.3新增功能说明

规则引擎更新功能 新增: 1、数据源新增Excel数据源; Excel数据源功能允许用户将Excel文件作为数据源导入,并进行数据清洗、转换和处理,以实现数据的集成、可视化和深度分析,为决策提供强大支持,同时保持良好的交互性…

html+css 有关于less的使用和全面解释

目录 less 注释 运算 嵌套 变量 导入 导出 禁止导出 less Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力 注意:浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件 V…

ClickHouse数据库详解和应用实践

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 概述1.适用场景2.不适用场景 一、核心特性1.完备的DBMS功能2.列式存储与数据压缩 二、安装部署1.在线安装2.离线安装 三、jdbc访问总结 概述 ClickHouse 是一个用于…

Linux 系统磁盘空间扩容

根据提示可以看到此系统的磁盘是 50G 的,但是实际适用有28G左右可以扩容20G 1、磁盘分区 m 查看帮助信息 n(表示增加分区) p(创建主分区) partition number 输入3(因为上面已经有两个分区 sda1 和 sda2&…

Qt中图片旋转缩放操作

在我们开发过程中,难免会遇到加载图片的问题,在上一个开发项目里我就遇到了图片缩放的问题,所以,我决定将这一部分好好研究,记录下来,希望对大家有帮助哟~ 在讲解之前,我们先看一看具体的展示效…

react antd,echarts全景视图

1.公告滚动,40s更新一次 2.echarts图标 左右轮播 60s更新一次 3.table 表格 import { useState, useEffect } from react;import Slider from react-slick; import slick-carousel/slick/slick-theme.css; import slick-carousel/slick/slick.css;import Layout fro…

MongoDB批量写入操作

一、概述 MongoDB为客户端提供了批量执行写入操作的能力。批量写入操作影响单个集合。MongoDB允许应用程序确定批量写入操作所需的可接受确认级别。 db.collection.bulkWrite()方法提供了执行批量插入、更新和删除操作的能力。 MongoDB还支持通过db.col…

使用Apache POI将数据写入Excel文件

首先导入依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.16</version> </dependency> <dependency><groupId>org.apache.poi</groupId><artifactId>po…

Spring Cloud Gateway 缓存区异常

目录 1、问题背景 2、分析源码过程 3、解决办法 最近在测试环境spring cloud gateway突然出现了异常&#xff0c;在这里记录一下&#xff0c;直接上干货 1、问题背景 测试环境spring cloud gateway遇到以下异常 DataBufferLimitException: Exceeded limit on max bytes t…

Spring 面试题学习笔记整理

Spring 面试题学习笔记整理 Spring的理解IOC读取 xml注入 配置过程解析注解注入过程 高频 &#xff1a;IOC 理解 及原理 底层实现IoC的底层实现高频&#xff1a;Bean的生命周期&#xff08;图解&#xff09;高频&#xff1a;Bean的生命周期&#xff08;文解&#xff09;扩展知识…

STM32和ESP8266的WiFi模块控制与数据传输

基于STM32和ESP8266 WiFi模块的控制与数据传输是一种常见的嵌入式系统应用。在这种应用中&#xff0c;STM32作为主控制器负责控制和与外部传感器交互&#xff0c;而ESP8266 WiFi模块则用于实现无线通信和数据传输。本文将介绍如何在STM32上控制ESP8266模块&#xff0c;建立WiFi…

【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程&#xff0c;这个过程称之为是生命周期&…

3D 纹理的综合指南

在线工具推荐&#xff1a;3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 我们经常看到超现实主义的视频游戏和动画电影角色出现在屏幕上。他们皮肤上的…

EasyRecovery2024永久免费版电脑数据恢复软件

EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或者丢失的文件&#xff0c;其支持的媒体介质包括&#xff1a;硬盘驱动器、光驱、…

嵌入式(三)中断解析 | 中断基本概念 CC2530中断系统 中断编程全解析

文章目录 1中断的概念和作用1.1 概念1.2 作用1.3 中断 其他概念 2. CC2530的中断系统3 中断编程3.1 中断配置3.1.1 使能端口组的中断功能3.1.2 使能当前端口组有哪些端口引脚中断3.1.3 设置中断触发方式 3.2 中断处理函数编写3.2.1 基本编写格式3.2.2 识别触发外部中断的端口Po…

实验笔记之——bug:in /usr/local/lib/libfmt.a(format.cc.o) is referenced by DSO

最近在编译D-MAP的时候遇到下面的问题 在github issue好像也有类似的提问 compiling error with fmt Issue #4 hku-mars/D-Map GitHub 这应该是fmt配置没有连接上。为此寻找所有包含的fmt文件&#xff0c;在头文件处加入 #define FMT_HEADER_ONLY #include "fmt/for…

Java学习苦旅(十九)——详解Java的堆和优先级队列

本篇博客将详细讲解堆和优先级队列。 文章目录 堆概念向下调整 优先级队列概念内部原理入队列出队列返回队首元素java中的优先级队列常用操作 topK问题结尾 堆 概念 堆逻辑上是一棵完全二叉树。 堆物理上是保存在数组中。 满足任意结点的值都大于其子树中结点的值&#xff…

北京大学漏洞报送证书

获取来源&#xff1a;edusrc&#xff08;教育漏洞报告平台&#xff09; url&#xff1a;教育漏洞报告平台(EDUSRC) 兑换价格&#xff1a;30金币 获取条件&#xff1a;北京大学任意中危或以上级别漏洞

【React系列】Portals、Fragment

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) Portals 某些情况下&#xff0c;我们希望渲染的内容独立于父组件&#xff0c;甚至是独立于当前挂载到的DOM元素中&am…

浅谈基于物联网的建筑物综合环境能耗监测管理系统

叶根胜 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;随着社会经济的快速发展&#xff0c;我国建筑能源消费总量逐年增加&#xff0c;占社会能源消费总量的近30%。国际发达国家建设部科技司的相关研究表明&#xff0c;随着城市化进程的加快和人民生活质量的提高&…