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

news2025/2/26 19:49:41

在这里插入图片描述
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.coloradmin.cn/o/1889200.html

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

相关文章

人大出品!最适合大模型初学者人手的LLM大语言模型综述,爆火全网

今天给大家推荐一本大模型&#xff08;LLM&#xff09;这块的一本外文书&#xff0c;经过整理已经出中文版了&#xff0c;就是这本《大型语言模型综述》&#xff01;本书在git上有9.2k star&#xff0c;还是很不错的一本大模型方面的书。 本教程内容主要内容&#xff1a;中文版…

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

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

Qt/C++编写地图应用/离线地图下载/路径规划/轨迹回放/海量点/坐标转换

一、前言说明 这个地图组件写了很多年了&#xff0c;最初设计的比较粗糙&#xff0c;最开始只是为了满足项目需要&#xff0c;并没有考虑太多拓展性&#xff0c;比如最初都是按照百度地图写死在代码中&#xff0c;经过这几年大量的现场实际应用&#xff0c;以及大量的用户提出…

1.7-自然语言的分布式表示-skip-gram模型代码实现

文章目录 1 skip-gram模型的实现1.1模型结构的实现1.2前向传播的实现1.3反向传播的实现 2 skip-gram模型的计算与学习3总结 书上提供了skip-gram模型的代码实现&#xff0c;但是没有去讲解&#xff1b;这里我们自己来看看他提供的代码&#xff1b;看代码的时候&#xff0c;尤其…

yarn不同操作系统的安装与配置

Yarn 是一个快速、可靠且安全的依赖包管理工具&#xff0c;用于替代 npm。以下是在不同操作系统上安装和配置 Yarn 的步骤。 1. 安装 Node.js 在安装 Yarn 之前&#xff0c;请确保已经安装了 Node.js&#xff0c;因为 Yarn 需要 Node.js 环境。你可以在 Node.js — Run JavaSc…

极简通俗VAE

一、VAE 背景&#xff1a;VAE什么变分自编码器&#xff0c;听起来起名都头大&#xff0c;用大白话告诉你。 把一个复杂图片压缩成两个参数&#xff0c;用这个参数采样再复原。 这个简单的东西是两个参数&#xff0c;均值和方差&#xff0c;用&#xff08;0&#xff0c;1&…

15kg级弹簧刀高速巡飞无人机技术详解

弹簧刀高速巡飞无人机&#xff0c;作为一种先进的战术导弹系统&#xff0c;融合了无人机与导弹的双重特性&#xff0c;成为了现代战争中不可或缺的侦察与打击利器。该无人机以其小巧的外形设计、优异的性能表现和广泛的适用领域&#xff0c;受到了全球军事领域的广泛关注。弹簧…

ChatGPT如何应用在谷歌seo?

ChatGPT在提升博客和创作效率方面非常有用。它可以帮助你快速生成吸引人的标题&#xff0c;确保内容第一眼就能抓住读者的注意力。不仅如此&#xff0c;ChatGPT还能根据你的主题生成详细的文章提纲&#xff0c;让你在写作时思路更加清晰。关键词优化也是它的强项&#xff0c;可…

当《开心消消乐》遇上 AI 推理,我们找到了高质量关卡背后的原因!

随着 AI 热潮席卷各行各业&#xff0c;其落地应用已经成为企业技术研发升级的工作重心。人工智能应用的升级不仅需要软件层面的升级迭代&#xff0c;还需要大规模基础设施的支撑。然而&#xff0c;自行搭建大规模算力、存储基础设施对于大多数企业而言都存在技术难度、人力资源…

OpenSSL的一些使用案例

目录 一、介绍 二、基本使用 1、Shell &#xff08;1&#xff09;文件加解密 &#xff08;2&#xff09;生成密钥文件 2、API &#xff08;1&#xff09;md5sum &#xff08;2&#xff09;AES256加解密 一、介绍 本篇博客重点不是详细描述 OpenSSL 的用法&#xff0c;只…

【IA修补一切】Inpaint Anything: Segment Anything Meets Image Inpainting论文解读

作者来自中国科学技术大学和东部高级研究院。文章提出了一个新的图像修复工具“Inpaint Anything (IA)”&#xff0c;它结合了不同的视觉模型&#xff0c;如Segment Anything Model (SAM)、LaMa、Stable Diffusion (SD)等&#xff0c;以实现更高级的图像编辑功能。 论文&#x…

P3374 【模板】树状数组 1

题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行下面两种操作&#xff1a; 将某一个数加上 &#x1d465;x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 &#x1d45b;,&#x1d45a;n,m&#xff0c;分别表示该数列数字的个数和操作的总个数。 …

【MySQL】表的操作{创建/查看/修改/删除}

文章目录 1.创建表1.1comment&#xff1a;注释信息1.2存储引擎 2.查看表3.修改表3.1add添加列&#xff0c;对原数据无影响3.2drop删除列3.3modify修改列类型3.4change修改列名3.5rename [to]修改表名 4.删除表5.总结 1.创建表 CREATE TABLE table_name (field1 datatype,field…

springboot医院门诊挂号系统-计算机毕业设计源码033123

目 录 摘要 1 绪论 1.1研究背景及意义 1.2研究现状 1.3系统开发技术的特色 1.4论文结构与章节安排 2 医院门诊挂号系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.3.2数据修改流程 2.3.3数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.…

第一百三十八节 Java数据类型教程 - Java boolean数据类型和float数据类型

Java数据类型教程 - Java boolean数据类型 布尔数据类型只有两个有效值:true和false。 这两个值称为布尔值字面量。 我们可以使用布尔值字面量 boolean done; // Declares a boolean variable named done done true; // Assigns true to done布尔变量不能转换为任何其他…

什么是分库分表?它有哪些实现类型?

假如你正在使用关系型数据库开发一款健康类系统。业务发展很好&#xff0c;系统有很多活跃的新老用户&#xff0c;这些用户会和平台的医生团队进行交互&#xff0c;每天可能会生成数万甚至数十万级别的业务数据。这样的话&#xff0c;随着数据量越来越大&#xff0c;系统中的某…

如何选择易用性高的项目管理软件?

随着项目管理在各行各业的广泛应用&#xff0c;选择一款易用性高的项目管理软件变得越来越重要。易用性高的软件可以帮助企业提高工作效率&#xff0c;降低管理成本&#xff0c;同时还能提升团队之间的协作能力。那么&#xff0c;如何选择一款易用性高的项目管理软件呢&#xf…

C++ Linux调试(无IDE)

跨平台IDE编译调试C很方便&#xff0c;如QTCreate 、VSCode、Eclipse等&#xff0c;但是如果只能使用Shell控制台呢&#xff0c;gdb调试的优势就很明显了&#xff0c;在没有IDE的情况下&#xff0c;这个方式最有效。因为上手不是很难&#xff0c;特此整理 参考链接 目录 1、G…

边缘网关在实际应用中的价值与挑战-天拓四方

随着物联网、大数据和人工智能等技术的快速发展&#xff0c;边缘计算逐渐崭露头角&#xff0c;成为推动数字化转型的关键力量。而边缘网关&#xff0c;作为边缘计算的核心组成部分&#xff0c;其重要性不言而喻。本文将以某智能制造企业为例&#xff0c;结合数据分析&#xff0…

MySQL高级-MVCC- readview介绍

文章目录 1、介绍2、ReadView中包含了四个核心字段&#xff1a;3、版本链数据的访问规则&#xff1a;4、不同的隔离级别&#xff0c;生成ReadView的时机不同&#xff1a; 1、介绍 ReadView&#xff08;读视图&#xff09;是 快照读 SQL执行时MVCC提取数据的依据&#xff0c;记录…