vue实现一个简单的审批绘制功能

在这里插入图片描述
1、vue代码

<div class="approval"><div class="approval_ul" v-for="(item,key) in approvalList" :key="key"><div><el-radio-group v-model="item.jointlySign"><el-radio label="1">会签</el-radio><el-radio label="2">抄送</el-radio></el-radio-group></div><div style="margin-top: 15px;"><el-select v-model="item.approvalPersonnel" placeholder="请选择" size="mini"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div><div class="remove" title="删除" @click="removeClick(key)">x</div></div><div class="operation"><el-button size="mini" @click="addClick"><b><i class="el-icon-plus"></i></b></el-button></div><el-button size="mini" @click="submitClick"><b>提交</b></el-button></div>
<script>
export default {name: "approval",data(){return {options: [{label: '张三',value: '1'},{label: '李四',value: '2'},],approvalList: [{jointlySign: '1', // 1: 会签, 2: 抄送approvalPersonnel: '', // 审批人员},]}},mounted() {},methods: {/**删除 */removeClick(key){this.approvalList.splice(key,1);},/**添加 */addClick(){let obj = {jointlySign: '1', // 1: 会签, 2: 抄送approvalPersonnel: '', // 审批人员}this.approvalList.push(obj)},/**提交 */submitClick(){console.log(this.approvalList,'-=-=-=-')},}
}
</script>
<style scoped lang="scss">
.approval{width: 420px;.approval_ul{border: 1px solid #ccc;padding: 10px;box-sizing: border-box;border-radius: 5px;position: relative;margin-bottom: 45px;.remove{width: 20px;height: 20px;background: #99CCFF;position: absolute;top: 0;right: 0;cursor: pointer;display: flex;justify-content: center;align-items: center;color: #fff;border-radius: 0 5px 0 5px;}}.approval_ul::after {content: '';position: absolute;width: 2px;height: 30px;background-color: #ccc;top: calc(100% + 10px);left: 50%;transform: translateX(-50%);}.operation{width: 100%;display: flex;justify-content: center;}
}</style>

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

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

相关文章

【超全详解】耳机怎么清理?手把手教你清洁各种耳机!

平时听歌、听书、打电话耳机往往有时候几个小时都戴着&#xff0c;时间久了难免会堆积污垢堵孔。这可能就会造成耳机左右音量不一致、声音小、降噪效果变差、嗡嗡声等问题&#xff0c; 而且耳机用久了如果不及时清理&#xff0c;可能导致耳朵感染细菌&#xff0c;严重的话会影响…

学习React hook API

React hook API useEffect&#xff08;异步执行&#xff09;useLayoutEffect&#xff08;同步执行&#xff09; useEffect&#xff08;异步执行&#xff09; useEffect: 是在浏览器完成绘制后异步执行的; 所以如果你在 useEffect 中改变了 DOM&#xff0c;可能会造成用户看到的…

使用Random.next生成随机数

使用Random.next生成随机数 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Java中如何使用 Random.next 方法生成随机数。随机数在编程中应用广…

谈谈JVM内存区域的划分,哪些区域可能发生OutOfMemoryError?(jvm)

Java 虚拟机&#xff08;JVM&#xff09;在运行时将内存划分为多个区域&#xff0c;以便有效管理和分配内存资源。这些内存区域包括堆&#xff08;Heap&#xff09;、方法区&#xff08;Method Area&#xff09;、程序计数器&#xff08;Program Counter Register&#xff09;、…

计算机大方向的就业选择

选专业要了解自己的兴趣所在。 即想要学习什么样的专业&#xff0c;如果有明确的专业意向&#xff0c;就可以有针对性地选择那些专业实力较强的院校。 2.如果没有明确的专业意向&#xff0c;可以优先考虑一下院校。 确定一下自己想要选择综合性院校还是理工类院校或是像财经或者…

亚马逊测评策略全攻略:详析各方案优势与局限,你精通了吗?

亚马逊测评&#xff0c;一个绕不开的话题。不管是对于新手卖家还是资深卖家来说&#xff0c;它都是提升产品销量和排名的有效手段之一。接下来&#xff0c;我将为大家详细解析亚马逊测评的各种方式和注意事项。 一、精准筛选真人测评资源 在寻找真人测评资源时&#xff0c;许多…

难道 Java 已经过时了?

当一门技术已经存在许多年了&#xff0c;它可能会失去竞争力&#xff0c;而后黯然退场&#xff0c;默默地离开&#xff0c;这对大部分的人来说就已经算是过时了。 Java 于 1995 年正式上线&#xff0c;至今已经走过了 27 个年头&#xff0c;在众多编程技术里算是年龄比较大的语…

数据结构----栈和队列之队列的实现

目录 1.基本概况 2.队列组成 3.队列的实现 &#xff08;1&#xff09;队列的初始化 &#xff08;2&#xff09;队列的销毁 &#xff08;3&#xff09;队列的尾插 &#xff08;4&#xff09;队列的头删 &#xff08;5&#xff09;队列的判空 &#xff08;6&#xff09;队…

Java项目总结1

1.什么是面向对象&#xff08;此对象非彼对象&#xff09; “面向对象的方法主要是把事物给对象化&#xff0c;包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程&#xff0c;面向过程抽象成类&#xff0c;然后封装&#xff0c;方便使用…

外挂级OCR神器:免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

智能文档解析&#xff1a;大模型友好的文档解析工具 PDF转Markdown 支持将任意格式的文件&#xff08;图片、PDF、Doc&#xff0f;Docx、网页等&#xff09;解析为Markdown或Json格式&#xff0c;以对LLM友好的方式呈现。 更高速度&#xff1a;100页PDF最快1.5s完成解析 更大…

SAR目标检测

Multi-Stage with Filter Augmentation 多阶段滤波器增强(MSFA) 对SAR合成孔径雷达目标检测性能的改善 MSFA ON SAR 传统方法: 预训练:传统方法开始于在通用数据集上预训练一个基础模型。 微调:这个预训练的模型会被微调以适应特定的SAR图像&#xff0c;试图缩小域间的差距 …

selector实现按钮选中高亮效果原理

<?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"> <item android:state_pressed"true" android:drawable"drawable/background_press…

【Pytorch实用教程】如何在多个GPU上使用分布式数据并行进行训练模型

文章目录 1. 代码(可直接运行,含随机生成的训练数据)2. 代码的详细解释2.1. 导入必要的库和模块2.2. 设置每个进程的初始设置2.3. 随机生成数据集类 `RandomDataset`2.4. 训练函数 `train`1. 代码(可直接运行,含随机生成的训练数据) 以下是一个基于PyTorch的多GPU分布式…

【JAVA多线程】JDK中的各种锁,看这一篇就够了

目录 1.概论 1.1.实现锁的要素 1.2.阻塞队列 1.3.Lock接口和Sync类 2.各种锁 2.1.互斥锁 2.1.1.概论 2.1.2.源码 1.lock() 2.unlock() 2.2.读写锁 2.3.Condition 2.3.1.概论 2.3.2.底层实现 1.概论 1.1.实现锁的要素 JAVA中的锁都是可重入的锁&#xff0c;因为…

PHP 使用RabbitMq推送消息

use PhpAmqpLib\Connection\AMQPStreamConnection; use PhpAmqpLib\Message\AMQPMessage;config.php 文件 "order_dispose" > ["routingKey" > "xxx","name" > "xxx",//"class" > \app\rmq\pull\xxx…

苹果再出新招:macOS15 Beta2预览版更新,居然还有iPhone镜像功能

在数字化时代&#xff0c;操作系统的更新迭代是技术进步的显著标志。苹果公司以其一贯的创新精神&#xff0c;不断推动着个人计算体验的边界。 2024年6月25日&#xff0c;苹果公司向Mac电脑用户推出了macOS 15开发者预览版Beta 2更新&#xff0c;这不仅是对macOS系统的一次重大…

logback janinoEventEvaluator expression 实例

参考&#xff1a;logback 日志 mysql logback 日志过滤_mob64ca140d2323的技术博客_51CTO博客 <!-- 控制台日志配置 --><appender name"CONSOLE" class"ch.qos.logback.core.ConsoleAppender"><filter class"ch.qos.logback.core.fil…

RSA加密中可加密数据的长度

在RSA加密算法中&#xff0c;要编码的最大块大小取决于所选择的密钥长度。一般来说&#xff0c;RSA密钥长度可以是1024位、2048位或者4096位。 对于1024位密钥&#xff0c;最大块大小为117字节。这意味着&#xff0c;当使用1024位密钥时&#xff0c;您可以加密的最大数据块为1…

Linux开发:fork进程时避免产生僵尸进程

僵尸进程是指fork后的子进程在完成自己的工作后退出了,但是父进程却没有通过wait/waitpid获取子进程的退出码,这时子进程的资源还不能完全释放,因为需要等待父进程的回收,这时子进程就成为了僵尸进程: #include <iostream> #include <sys/types.h> #include …

【探索Linux】P.36(传输层 —— TCP协议段格式)

阅读导航 引言一、TCP段的基本格式二、控制位详细介绍三、16位接收窗口大小⭕窗口大小的作用⭕窗口大小的限制⭕窗口缩放选项⭕窗口大小的更新⭕窗口大小与拥塞控制 四、紧急指针温馨提示 引言 在上一篇文章中&#xff0c;我们深入探讨了一种无连接的UDP协议&#xff0c;它以其…