当前位置: 首页 > news >正文

elementui el-dialog 动态生成多个,点击按钮打开对应的 dialog

 业务场景:

根据后端返回的数据,动态生成表单,返回的数据中会有表单字段的类型,如果单选、多选、富文本,其它的属性还好说,重点说在富文本,因为我想通过 dialog 弹窗的方式,进行富文本编辑。

问题描述:

因为是动态生成的,可能多个字段是富文本,那么当按钮点击的时候,dialog 要展示对应字段的富文本。

如果按照官网的 demo 设置  visible.sync="dialogVisible",就会导致点击一个会打开所有的 dialog,可以通过 f12 查看元素,确实都开了,这肯定是不对的。

解决思路:

1.在获取后台数据之后,定义一个对象,dialogObject:{},然后通过数据,在 dialogObject 中设置字段false,

dialogObject:{
    "字段 1":false,
    "字段 2":false,
}

2.在渲染 form 时,通过字段名称在 dialogObject 中找到对应的值,并设置到visible.sync中

然后在创建方法,修改dialogObject 中对应字段的值,来决定 dialog 是否打开。

上代码:

<el-button type="danger" plain @click="openDialog(keyItem.name)">填写</el-button><el-dialog :id=keyItem.nametitle="提示":visible.sync="dialogObject[keyItem.name]"width="30%"><Tinymce v-model="formGroupKey[keyItem.name]" :str="str"></Tinymce><span slot="footer" class="dialog-footer"><el-button @click=closDialog(keyItem.name)>取 消</el-button><el-button type="primary" @click=closDialog(keyItem.name)>确 定</el-button></span></el-dialog>

相关文章:

elementui el-dialog 动态生成多个,点击按钮打开对应的 dialog

业务场景&#xff1a; 根据后端返回的数据&#xff0c;动态生成表单&#xff0c;返回的数据中会有表单字段的类型&#xff0c;如果单选、多选、富文本&#xff0c;其它的属性还好说&#xff0c;重点说在富文本&#xff0c;因为我想通过 dialog 弹窗的方式&#xff0c;进行富文…...

自己开发一个接口文档页面html

演示效果 具体代码如下 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>框架框架文档页面</…...

信息化发展28

区块链概述 区块链技术具有多中心化存储、隐私保护、防篡改等特点&#xff0c; 提供了开放、分散和容错的事务机制&#xff0c; 成为新一代匿名在线支付、汇款和数字资产交易的核心&#xff0c; 被广泛应用于各大交易平台&#xff0c; 为金融、监管机构、科技创新、农业以及政…...

React 入门实例教程

目录 一、HTML 模板 二、ReactDOM.render() 三、JSX 语法 四、组件 五、this.props.children 六、PropTypes 七、获取真实的DOM节点 八、this.state 九、表单 十、组件的生命周期 constructor() componentWillMount() render() componentDidMount() 组件生命周期…...

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…...

Pytorch intermediate(三) RNN分类

使用RNN对MNIST手写数字进行分类。RNN和LSTM模型结构 pytorch中的LSTM的使用让人有点头晕&#xff0c;这里讲述的是LSTM的模型参数的意义。 1、加载数据集 import torch import torchvision import torch.nn as nn import torchvision.transforms as transforms import torc…...

vue2+webpack升级vue3+vite,修改插件兼容性bug

同学们可以私信我加入学习群&#xff01; 前言 在前面使用electronvue3的过程中&#xff0c;已经验证了历史vue2代码vue3混合开发的模式。 本次旧项目vue框架整体升级中&#xff0c;同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工…...

案例实战-Spring boot Web

准备工作 需求&环境搭建 需求&#xff1a; 部门管理&#xff1a; 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表&#xff08;分页、条件&#xff09; 删除员工 新增员工 修改员工 环境搭建 准备数据库表&#xff08;dept、emp&#xff09; -- 部门管理…...

Spring6.1之RestClient分析

文章目录 1 RestClient1.1 介绍1.2 准备项目1.2.1 pom.xml1.2.2 创建全局 RestClient1.2.3 Get接收数据 retrieve1.2.4 结果转换 Bean1.2.5 Post发布数据1.2.6 Delete删除数据1.2.7 处理错误1.2.8 Exchange 方法 1 RestClient 1.1 介绍 Spring 框架一直提供了两种不同的客户端…...

冒泡排序、选择排序、插入排序、希尔排序

冒泡排序 基本思想 代码实现 # 冒泡排序 def bubble_sort(arr):length len(arr) - 1for i in range(length):flag Truefor j in range(length - i):if arr[j] > arr[j 1]:temp arr[j]arr[j] arr[j 1]arr[j 1] tempflag Falseprint(f第{i 1}趟的排序结果为&#…...

OpenCV(二十三):中值滤波

1.中值滤波的原理 中值滤波&#xff08;Median Filter&#xff09;是一种常用的非线性图像滤波方法&#xff0c;用于去除图像中的椒盐噪声等离群点。它的原理是基于邻域像素值的排序&#xff0c;并将中间值作为当前像素的新值。 2.中值滤波函数 medianBlur() void cv::medianBl…...

Prompt Tuning训练过程

目录 0. 入门 0.1. NLP发展的四个阶段&#xff1a; Prompt工程如此强大&#xff0c;我们还需要模型训练吗&#xff1f; - 知乎 Prompt learning系列之prompt engineering(二) 离散型prompt自动构建 Prompt learning系列之训练策略篇 - 知乎 ptuning v2 的 chatglm垂直领域训练记…...

装备制造企业是否要转型智能装备后服务型公司?

一、从制造到服务&#xff1a;装备制造企业的转型之路 装备制造企业作为国家经济发展的重要支柱&#xff0c;面临着日益激烈的市场竞争。在这样的背景下&#xff0c;越来越多的装备制造企业开始意识到&#xff0c;通过转型为智能装备后服务型公司&#xff0c;可以更好地满足客…...

day-49 代码随想录算法训练营(19) 动态规划 part 10

121.买卖股票的最佳时机 思路一&#xff1a;贪心 不断更新最小买入值不断更新当前值和最小买入值的差值最大值 思路二&#xff1a;动态规划&#xff08;今天自己写出来了哈哈哈哈哈哈哈&#xff09; 1.dp存储&#xff1a;dp[i][0] 表示当前持有 dp[i][1]表示当前不持有2.状…...

检查文件名是否含不可打印字符的C++代码源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;有时候需要检查输入的是否是合法的文件名&#xff0c;文件名是否含不可打印字符等。代码如下&#xff1a; //----------------------…...

学习笔记-正则表达式

https://www.runoob.com/regexp/regexp-tutorial.html 正则表达式re(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;&#xff0c;可以用来描…...

Wireshark TS | 网络路径不一致传输丢包问题

问题背景 网络路径不一致&#xff0c;或者说是网络路径来回不一致&#xff0c;再专业点可以说是网络路径不对称&#xff0c;以上种种说法&#xff0c;做网络方向的工程师肯定会更清楚些&#xff0c;用简单的描述就是&#xff1a; A 与 B 通讯场景&#xff0c;C 和 D 代表中间…...

CMake高级用法实例分析(学习paddle官方的CMakeLists)

cmake基础学习教程 https://juejin.cn/post/6844903557183832078 官方完整CMakeLists cmake_minimum_required(VERSION 3.0) project(PaddleObjectDetector CXX C)option(WITH_MKL "Compile demo with MKL/OpenBlas support,defaultuseMKL." ON) o…...

数据采集: selenium 自动翻页接口调用时的验证码处理

写在前面 工作中遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对大…...

IDEA安装翻译插件

IDEA安装翻译插件 File->Settings->Plugins 在Marketplace中&#xff0c;找到Translation&#xff0c;点击Install 更换翻译引擎 勾选自动翻译文档 翻译 鼠标右击->点击Translate...

2026权威评测:毕业论文AIGC降重盘点!免费试用首选

【CSDN极客特稿AI科研生产力专栏】 各位深夜还在实验室和IDE里跑模型、改Paper的硕博兄弟们&#xff0c;见字如面。 把日历翻到2026年&#xff0c;当大语言模型&#xff08;LLM&#xff09;的参数量卷上天际的同时&#xff0c;各大高校的“反作弊探测矩阵”也完成了史诗级的底层…...

学习如何聚合零样本大型语言模型代理以进行企业披露分类

摘要本文研究一个轻量级训练聚合器是否能够将多样化的零样本大语言模型判断整合为更强的下游信号&#xff0c;用于公司披露分类。零样本大语言模型无需针对特定任务进行微调即可阅读披露文本&#xff0c;但其预测结果常因提示词、推理方式和模型家族的不同而存在差异。我采用一…...

霜儿-汉服-造相Z-Turbo实战体验:输入一句话,秒获专属汉服少女AI写真

霜儿-汉服-造相Z-Turbo实战体验&#xff1a;输入一句话&#xff0c;秒获专属汉服少女AI写真 1. 惊艳效果展示&#xff1a;从文字到古风美图的魔法 想象一下&#xff0c;你只需要输入"霜儿&#xff0c;古风汉服少女&#xff0c;月白霜花刺绣汉服&#xff0c;江南庭院&quo…...

云容笔谈·东方红颜影像生成系统与ComfyUI工作流集成:可视化节点式创作

云容笔谈东方红颜影像生成系统与ComfyUI工作流集成&#xff1a;可视化节点式创作 如果你是一位数字艺术家或者技术美术&#xff0c;可能常常面临这样的困境&#xff1a;你有一个绝佳的创意&#xff0c;比如想生成一幅融合了东方古典美学与现代光影的“红颜”肖像&#xff0c;但…...

DroidRun:用自然语言指令重塑Android自动化体验

1. 当Android遇上自然语言&#xff1a;DroidRun如何重新定义自动化 还记得第一次用语音助手控制手机时的惊艳吗&#xff1f;说句话就能定闹钟、发消息&#xff0c;感觉像在演科幻片。但很快你就会发现&#xff0c;这些功能就像快餐店的固定套餐——只能点菜单上有的&#xff0c…...

HP-Socket创新项目原型迭代记录:变更、原因与效果

HP-Socket创新项目原型迭代记录&#xff1a;变更、原因与效果 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为一款高性能TCP/UDP/HTTP通信组件&#xff0c;其…...

gte-base-zh场景应用:电商搜索与客服问答的语义匹配实战

gte-base-zh场景应用&#xff1a;电商搜索与客服问答的语义匹配实战 1. 电商场景中的语义匹配挑战 1.1 搜索不精准的痛点分析 在电商平台上&#xff0c;用户搜索"苹果手机"却看到水果苹果的图片&#xff0c;或者输入"轻薄笔记本"却返回游戏本&#xff0…...

探索粗糙表面波动模型生成:打造不规则之美

粗糙表面&#xff0c;波动模型生成&#xff0c;用于在物体表面生成不规则的粗糙表面&#xff0c;或面表面的波动边界等&#xff0c;可自定义波动分布与赋值。在图形学和模拟领域&#xff0c;生成物体表面的粗糙质感或是波动边界常常是一个有趣又具有挑战性的任务。今天咱们就聊…...

大数据产品实战:用户画像系统的设计与实现

大数据产品实战:用户画像系统的设计与实现 关键词:用户画像、标签体系、大数据平台、精准营销、数据挖掘 摘要:用户画像系统是大数据时代企业实现“以用户为中心”运营的核心工具,它通过给用户“贴标签”的方式,将复杂的用户行为转化为可量化、可分析的数字特征。本文将从…...

NTP配置避坑指南:华三/华为/思科设备时间同步差异对比

NTP配置避坑指南&#xff1a;华三/华为/思科设备时间同步差异对比 在网络运维中&#xff0c;时间同步是确保日志分析、安全审计和故障排查准确性的基础。不同厂商的设备在NTP配置上存在细微但关键的差异&#xff0c;这些差异往往成为混合环境部署中的"暗坑"。本文将深…...