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.mfbz.cn/a/767435.html

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

相关文章

P3374 【模板】树状数组 1

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

秋招突击——7/2——复习{}——新作{分割等和子集、不同路径、最小路径和、最长回文子串}

文章目录 引言复习新作分割等和子集个人实现参考实现 不同路径个人实现参考实现 最小路径和个人实现参考实现 最长回文子串个人实现参考实现字符串哈希二分 总结 引言 今天起的挺早的&#xff0c;早上把昨天录得关于JVM的相关八股都听完了&#xff0c;然后还背了一部分八股&am…

用Chromatix进行tuning流程

##一、基本调试 ###1、工程初始配置&#xff1a; 这个工具就是一个图形化的参数编辑器&#xff0c;其实所有tuning中的效果参数直接改文件参数酒醒&#xff0c;工具的好处是&#xff1a;带有检查错误和模拟的功能以及一些校验工具和脚本。 初始化可以中需要的配置&#xff1a;t…

基于Java的音乐网站系统01239

目 录 摘要 1 绪论 1.1 研究背景 1.2系统开发目标、意义 1.3研究内容 2 相关技术介绍 2.1 MySQL数据库 2.2 Java编程语言 2.3 SpringBoot框架介绍 3 系统需求分析与设计 3.1 可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 法律可行性分析 3.2 需…

IP地址定位中多源数据融合的应用

IP地址定位如今在诸如网络安全、地理信息服务、智能交通等领域发挥着关键作用。然而&#xff0c;传统的基于单一数据源&#xff08;如IP数据库&#xff09;的定位方法往往存在精度有限、可靠性不足等问题。多源数据融合技术的出现为解决这些问题提供了新的思路和方法。今天我们…

【机器学习】在【Pycharm】中的实践教程:使用【逻辑回归模型】进行【乳腺癌检测】

目录 案例背景 具体问题 1. 环境准备 小李的理解 知识点 2. 数据准备 2.1 导入必要的库和数据集 小李的理解 知识点 2.2 数据集基本信息 小李的理解 知识点 注意事项 3. 数据预处理 3.1 划分训练集和测试集 小李的理解 知识点 注意事项 3.2 数据标准化 小李…

北京app开发与小程序开发相比较下的优势

随着互联网科技与移动技术的不断成熟&#xff0c;app与小程序的使用也越来越频繁。作为现如今人们日常生活中不可或缺的辅助工具&#xff0c;各企业也开始探索、开发自己的小程序或app。那么&#xff0c;这两者的区别是什么呢&#xff1f;两者相比&#xff0c;北京app开发又具有…

Android平台崩溃和 ANR 问题进行符号化解析、解析崩溃日志的内存地址

使用Android Logcat Stacktrace Utility | Android Logcat | 1.2.3 1.设置so库路径 2.打开Stacktrace Utility工具 3.在Original粘贴报错内存地址 4.点击Resolve Stacktraces,就会解析出内存地址 如果是红色,解析失败了,缺少原生so库,可以在第一步添加so库文件再次尝试…

未公开 GeoServer开源服务器wfs远程命令执行漏洞 已复现(CVE-2024-36401)

0x01 阅读须知 技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成…

【进阶篇】Java 项目中对使用递归的理解分享

前言 笔者在最近的项目开发中&#xff0c;遇到了两个父子关系紧密相关的场景&#xff1a;评论树结构、部门树结构。具体的需求如&#xff1a;找出某条评论下的所有子评论id集合&#xff0c;找出某个部门下所有的子部门id集合。 在之前的项目开发经验中&#xff0c;递归使用得是…

win10下Python的安装和卸载

前言 之前电脑上安装了python3.9版本&#xff0c;因为工作需要使用3.6版本的Python&#xff0c;需要将3.9版本卸载&#xff0c;重新安装3.6版本。下面就是具体的操作步骤: 1. 卸载 在我的电脑中搜索到3.9版本的安装文件&#xff0c;如下图&#xff1a; 双击该应用程序&#xf…

数据结构历年考研真题对应知识点(树的基本概念)

目录 5.1树的基本概念 5.1.2基本术语 【森林中树的数量、边数和结点数的关系&#xff08;2016&#xff09;】 5.1.3树的性质 【树中结点数和度数的关系的应用&#xff08;2010、2016&#xff09;】 【指定结点数的三叉树的最小高度分析&#xff08;2022&#xff09;】 5.1…

win10显示毫秒-上午-下午及星期几,24小时制

关于毫秒 winr regedit 计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced 新建ShowSecondsInSystemClock&#xff0c;编辑1显示&#xff0c;不显示就删了它 然后重启 资源管理器可能有多个全部重启&#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…

昇思MindSpore学习笔记3-02热门LLM及其他AI应用--K近邻算法实现红酒聚类

摘要&#xff1a; 介绍了K近邻算法&#xff0c;记录了MindSporeAI框架使用部分wine数据集进行KNN实验的步聚和方法。包括环境准备、下载红酒数据集、加载数据和预处理、搭建模型、进行预测等。 一、KNN概念 1. K近邻算法K-Nearest-Neighbor(KNN) 用于分类和回归的非参数统计…

2024年下半年系统集成项目管理工程师使用新版教材,该如何备考?

2024年下半年&#xff0c;新版的《系统集成项目管理工程师教程》&#xff08;第3版&#xff09;将被系统集成项目管理工程师使用。许多考生可能会感到迷茫&#xff0c;不知道该如何复习。毕竟教材更新后&#xff0c;以往的资料和真题都变得无用&#xff0c;重点内容和考试方向也…

llm学习-3(向量数据库的使用)

1&#xff1a;数据读取和加载 接着上面的常规操作 加载环境变量---》获取所有路径---》加载文档---》切分文档 代码如下&#xff1a; import os from dotenv import load_dotenv, find_dotenvload_dotenv(find_dotenv()) # 获取folder_path下所有文件路径&#xff0c;储存在…

OV SSL证书年度成本概览:为企业安全护航的经济之选

在当今数字化时代&#xff0c;企业网站不仅是品牌展示的窗口&#xff0c;更是与客户沟通的桥梁。然而&#xff0c;随着网络威胁的不断升级&#xff0c;保护网站安全成为了企业不可忽视的任务。SSL证书&#xff0c;特别是OV SSL证书&#xff0c;因其对企业身份的严格验证&#x…

Halcon OCR字符识别(极坐标转换,字符识别)

Halcon OCR字符识别&#xff08;极坐标转换&#xff0c;字符识别&#xff09; 代码 * 1.加载图片 *************************************************** dev_close_window () read_image (Image, ./img) get_image_size (Image, Width, Height) dev_get_window (WindowHandle…

聚鼎贸易:装饰画开店教程新手入门

当艺术遇上商业&#xff0c;每一幕交易皆是文化的交流。本篇将引领有志于开设装饰画店铺的新手们&#xff0c;迈入创业的门槛&#xff0c;以独特的视角和步骤&#xff0c;探索如何成功经营一家装饰画店。 精选货源乃基石。货源的选取不仅反映店主的品味&#xff0c;更直接影响到…