SpringBoo t+ Vue 微人事 (十一)

职位修改操作

在对话框里面做编辑的操作在这里插入图片描述
添加对话框
在这里插入图片描述

        <el-dialogtitle="修改职位":visible.sync="dialogVisible"width="30%"><div><el-tag>职位名称</el-tag><el-input size="small" class="updatePosInput"  v-model="updatePos.name"></el-input></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="doUpdate">确 定</el-button></span>

点击编辑按钮展示对话框
在这里插入图片描述

dialogVisible把这个属性设为true 就显示对话框了在这里插入图片描述
让输入框跟标签 一样展示
在这里插入图片描述
添加样式

  .updatePosInput{width: 200px;margin-left: 8px;}

在这里插入图片描述
职位的名称进行展示到对话框,对话框改变,职位名称也会变
在这里插入图片描述

   data(){return{pos:{name:""},dialogVisible:false,updatePos:{name:""},positions: [],}},

定义一个对象,点击进行赋值表单那项数据
在这里插入图片描述

 handleEdit(index, data) {this.updatePos=data;this.dialogVisible=true},

与输入框进行数据绑定
在这里插入图片描述
效果如下图:
在这里插入图片描述
点击确定按钮是做一个更新操作
在这里插入图片描述
进行后端连接,更新操作,
在这里插入图片描述
如图
在这里插入图片描述
修改
在这里插入图片描述
夕改成功
在这里插入图片描述
发现取消操作有点问题
在这里插入图片描述
进行取消
在这里插入图片描述
取消还展示输入框得数据
在这里插入图片描述
做一个变量的拷贝进行复原没有修改的数据
在这里插入图片描述

            handleEdit(index, data) {Object.assign(this.updatePos,data)//第一个参数拷贝到哪,第二参数拷贝的数据this.dialogVisible=true},

在这里插入图片描述
点击确认才会变进行修改了
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

在IDEA中创建properties配置文件

第一步&#xff1a;在 src路径下找到resources文件 第二步&#xff1a;右击选择新建Resource Bundle配置文件 第三步&#xff1a;为Resource Bundle配置文件命名 完成创建

Swift 周报 第三十五期

文章目录 前言新闻和社区五天市值蒸发 2000 亿美元&#xff0c;苹果公司怎么了&#xff1f;在你的 App 中帮助顾客解决账单问题需要声明原因的 API 列表现已推出 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组整理周报的第三十五…

SpringMVC归纳与总结

前言 Spring的核心是IOC&#xff0c;一种依赖反转的解耦思想。MVC是一种处理Web请求的架构模式&#xff0c;当两者的作用结合&#xff0c;就形成了SpringMVC。 组成及运行原理 1. 两次映射 2. 为什么用适配器模式 过滤器与拦截器 1. 范围 静态资源与动态资源2. 生命周期…

react-hooks 一般写法汇总

文件一般写法 // 引入统一封装api请求 import {getById } from "@/api"; // 引入ui组件库 import {Toast } from "antd-mobile"; // useEffect 类似vue中watch,或者moundted生命周期,视第二参数数据而定 // useState 是vue2的data、是vue3的ref或reacti…

Flink分流,合流,状态,checkpoint和精准一次笔记

第8章 分流 1.使用侧输出流 2.合流 2.1 union &#xff1a;使用 ProcessFunction 处理合流后的数据 2.2 Connect &#xff1a; 两条流的格式可以不一样&#xff0c; map操作使用CoMapFunction&#xff0c;process 传入&#xff1a;CoProcessFunction 2.2 BroadcastConnectedSt…

假设你新换了电脑,如何不用U盘的情况下实现软件文件转移?

要将笔记本和台式机连接到同一个局域网&#xff0c;并实现文件共享或使用文件传输协议进行文件传输&#xff0c;您可以按照以下步骤操作&#xff1a; 设置局域网连接共享文件夹使用文件传输协议 Step 1: 设置局域网连接 确保笔记本和台式机连接到同一个局域网。有几种常见的…

【仿写tomcat】三、通过socket读取http请求信息

仿写tomcat 建立Socket连接获取连接信息查看HTTP信息 建立Socket连接 这里我们也是创建一个专门管理socket的类 package com.tomcatServer.socket;import java.io.*; import java.net.ServerSocket;/*** 套接字存储** author ez4sterben* date 2023/08/15*/ public class Soc…

使用 AI 将绘画和照片转换为动画

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑器的3D应用场景 华盛顿大学和Facebook的研究人员最近发表了一篇论文&#xff0c;展示了一种基于深度学习的系统&#xff0c;可以将静止图像和绘画转换为动画。称为照片唤醒的算法使用卷积神经网络从单个静止图像以 …

Spring参数注解,支持数组入参(List)校验

Spring参数注解&#xff0c;支持数组入参&#xff08;List&#xff09;校验 1、controller类增加Validated注解&#xff0c;对应的数组参数增加Valid注解。 Validated RestController RequestMapping("/parent") public class ParentController {private FatherRepos…

滑块验证3-接第1篇

driver拖动滑块 滑块验证的过程比较常使用driver模拟滑动&#xff0c;这样能够省去很多验证操作。 如果设置适合的滑动轨迹&#xff0c;成功率是非常高的。 当然&#xff0c;麻烦的是现在很多站点都做了识别driver的反爬&#xff0c;而且比较受网络的影响。 所需包 seleniu…

C语言和JavaScript中的默认排序行为对比

前言 今天在js里使用sort时遇见了一个不理解的现象 即使用sort默认排序后 9 从排序前的第一位被排到了最后一位.一开始我对js sort的理解和c一样&#xff0c;然后通过查阅后发现并不是这样. 正文 排序是一项常见而重要的操作。不同的编程语言提供了不同的排序函数&#xf…

800V高压电驱动系统架构分析

需要电驱竞品样件请联&#xff1a;shbinzer &#xff08;拆车邦&#xff09; 过去一年是新能源汽车市场爆发的一年&#xff0c;据中汽协数据&#xff0c;2021年新能源汽车销售352万辆&#xff0c;同比大幅增长157.5%。新能源汽车技术发展迅速&#xff0c;畅销车辆在动力性能…

html | 基于iframe的简易富文本编辑器

效果图 支持: 选中后 ctrlI 斜体 代码 思路就是在iframe种嵌套html和css。 <pre> - 支持: 选中后 ctrlI 斜体 - todo: 鼠标实现单击斜体 </pre> <iframe name"richedit" style"height:30%; width:100%;"></iframe><script…

android framework-Pixel3真机系统内置第三方apk实战

一、在/packages/apps创建独一无二的文件夹TestCamera 二、拷贝第三方应用到TestCamera文件夹下 三、创建Android.mk LOCAL_PATH: $(call my-dir)include $(CLEAR_VARS) # Module name should match apk name to be installed LOCAL_MODULE : TestCamera LOCAL_MODULE_TAGS : o…

Android开发基础知识总结(一)初识安卓Android Studio

一.基础理论知识 1.Linux相当于是地基。 MIUI&#xff0c;EMUI等操作系统&#xff0c;是基于安卓的改版——且裁掉了一部分Google的服务。 &#xff08;鸿蒙虽然是改版&#xff0c;但和安卓的架构基本上一致&#xff09; 2.Kotlin和Java都是JVM语言&#xff0c;必须先复习好…

C#学习....

1.基础 //引用命名空间using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;//项目名或者命名空间 namespace _01_MY_First_Demo {//Program类class Program{//程序的主入口或者Main函数static void Main(S…

基于原生Servlet使用模板引擎Thymeleaf访问界面

我们常在Spring Boot项目中使用Thymeleaf模板引擎,今天突发奇想&#xff0c;尝试原生Servlet访问&#xff01; 说做就做 搭建完整的WEB项目 其中的大部分依赖都是后续报错 追加进来的 导入依赖 thymeleaf-3.0.11.RELEASE.jar 第一次访问 访问地址: http://localhost:8080…

BLFS学习系列 第25章. 图形环境库 —— libdrm

一、简介 libdrm提供了一个用户空间库&#xff0c;用于在支持ioctl接口的操作系统上访问直接渲染管理器&#xff08;DRM&#xff09;。libdrm是一个低级别库&#xff0c;通常由图形驱动&#xff08;程序&#xff09;使用&#xff0c;如Mesa DRI驱动&#xff08;程序&#xff0…

ping使用方法

文章目录 1、Ping的基础知识2、Ping命令详解3、怎样使用Ping这命令来测试网络连通&#xff1f;4、如何用Ping命令来判断一条链路好坏&#xff1f;5、对Ping后返回信息的分析1.Request timed out2.Destination host Unreachable 1、Ping的基础知识 ping命令相信大家已经再熟悉不…

【记录】Python3|Selenium4 极速上手入门(Windows)

环境&#xff1a;Windows 版本&#xff1a;python3&#xff0c;selenium 4.11.2 写这个是方便自己重装电脑时重新装 Selenium&#xff0c;懒得每次都重新找链接。 文章目录 1 装ChromeEdge其他浏览器 2 运行报错RequestsDependencyWarning: urllib3 (1.26.9) or chardet (3.0.4…