当前位置: 首页 > 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>

http://www.lryc.cn/news/164491.html

相关文章:

  • 自己开发一个接口文档页面html
  • 信息化发展28
  • React 入门实例教程
  • Window安装Node.js npm appium Appium Desktop
  • Pytorch intermediate(三) RNN分类
  • vue2+webpack升级vue3+vite,修改插件兼容性bug
  • 案例实战-Spring boot Web
  • Spring6.1之RestClient分析
  • 冒泡排序、选择排序、插入排序、希尔排序
  • OpenCV(二十三):中值滤波
  • Prompt Tuning训练过程
  • 装备制造企业是否要转型智能装备后服务型公司?
  • day-49 代码随想录算法训练营(19) 动态规划 part 10
  • 检查文件名是否含不可打印字符的C++代码源码
  • 学习笔记-正则表达式
  • Wireshark TS | 网络路径不一致传输丢包问题
  • CMake高级用法实例分析(学习paddle官方的CMakeLists)
  • 数据采集: selenium 自动翻页接口调用时的验证码处理
  • IDEA安装翻译插件
  • DBeaver使用
  • Nougat:一种用于科学文档OCR的Transformer 模型
  • redis八股1
  • 人工智能基础-趋势-架构
  • Date日期工具类(数据库日期区间问题)
  • 为什么需要 TIME_WAIT 状态
  • Linux——(第七章)文件权限管理
  • Scala在大数据领域的崛起:当前趋势和未来前景
  • 前端面试经典题--页面布局
  • 【webrtc】接收/发送的rtp包、编解码的VCM包、CopyOnWriteBuffer
  • Bash常见快捷键