若依分离版选择弹窗数据回读
创始人
2025-05-29 14:16:21
最近学习若依框架过程中想要实现点击按钮显示弹窗，在弹窗选择信息后回读到父组件中显示，初步测试符合要求，在这里记录一下
实现效果
点击图2【科室名称】的放大镜，弹出图1选择框，单击确定或者双击选择后回写到图2中，也可以回写多个选项，例如备注回写的科室领导
具体实现过程
1. 创建弹窗页面
弹窗页面借助若依代码生成功能，将生成的科室管理页面进行修改，作为独立页面放在ruoyi-ui/src/components下（components应该是公共组件页面，为保证页面整洁，在components下新建test文件夹，将selectDept.vue放入其中）
页面调整内容
-
直接复制科室管理页面，清理不需要的增删改查按钮及【修改科室管理对话框】
-
使用
el-dialog将整个页面以弹窗的形式展示
代码...
- 引入科室管理的列表显示功能，新增回传数据保存数组和序号字段，创建“新增、单击、双击、确定选中”的方法，最后在列表展示板块进行调用
/** import引入内容（script中） */
import { listDept } from "@/api/test/dept";/** data中新增回传数据数组及选择序号（script中） */
data(){代码...selectDeptId: undefined,selectedRows: [],
}/** methods中新增选择、单击、双击、确定选中4个方法（script中） */handleCurrent(row){if(row){this.selectedRows = row;}},// 单选选中数据handleRowChange(row) {if(row){this.selectedRows = row;}},//双击选中handleRowDbClick(row){if(row){this.selectedRows = row;this.$emit('onSelected',this.selectedRows);this.showFlag = false;}},//确定选中confirmSelect(){if(this.selectDeptId == null || this.selectDeptId == 0){this.$notify({title:'提示',type:'warning',message: '请至少选择一条数据!'});return;}this.$emit('onSelected',this.selectedRows);this.showFlag = false;}/** el-table模块调用对应方法（template中） */{{""}} 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/>确 定 取 消
2. 用户页面引用弹窗
- 引入上面创建的
selectDept.vue页面
// script中
import deptSelect from "@/components/Test/selectDept"export default {代码...components: { deptSelect },
}
- 创建点击按钮弹窗和选择信息回读的方法
//点击弹窗方法（script中）handleDeptSelect(){this.$refs.woSelect.showFlag = true;},//选择信息后操作onDeptSelected(row){if (row != undefined && row != null){this.form.deptName = row.deptsName;this.form.remark = row.deptsLeader;}}
- 在新增或修改对话框的【科室名称】处进行修改
input组件默认只读，需要通过点击按钮，获取科室名称后回读
//template中相关内容
热门资讯
【iOS】—— ARC学习
ARC 文章目录ARC内存管理的思考方式自己生成的对象自己持有非自己生成的对象，自己也...
Hadoop_HDFS、Had...
Hadoop_HDFS、Hadoop_MapReduce、Hadoop_Yarn 实践 (一) 前要...
Baumer工业相机堡盟相机如...
项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机，可用于各种应用场...
spark第三章：工程化代码
系列文章目录 spark第一章：环境安装 spark第二章：sparkc...
音视频技术开发周刊 | 285
每周一期，纵览音视频技术领域的干货。新闻投稿：contribute...
方向导数与梯度
1 方向导数（二元为例） Σ：z=f(x,y)&...
【字符串】
string1.char str[]类型fgets(s,10000,stdin) cin.getli...
Xmind 2022 for ...
XMind 2022 for Mac是一款优秀的思维导图软件，由XMind Ltd.公...
在 Ubuntu 中安装 DO...
了解如何在 Ubuntu 中安装 DOSBox，并配置它来玩旧式 DOS 游戏。DOS...
[图神经网络]图嵌入
将节点映射成D维向量主要有以下几种方法： ①人工特征工程：...
我的 System Veril...
引言 本文简单介绍 SystemVerilog 的其他程序结构。 前文链接： 我的 ...
Vue2项目总结-电商后台管理...
Vue2项目总结-电商后台管理系统 去年做的项目，拖了很久，总算是打起...
【业务安全-02】业务逻辑漏洞...
越权越权即越权查看被人的信息，又分为水平越权和垂直越权，但是两者的本质都...
面试了8家软件公司测试岗位，面...
包含的模块：本文分为十九个模块，分别是：软件测试 基础、l...
不要让ChatGPT成为你的智...
难处 我相信有部分人苦于政策，但是又没有途径，没法享受到chatGpt带...
Redis学习笔记 ---- ...
常见的有五种：String（字符串），Has...
Java实现十类排序算法对比展...
Java实现排序算法 本代码展示了Java中常见的十种排序算法，并对每种算法的时间复杂...
SC8P1762E_汇编指令一...
控制类 NOP， 空操作 STOP， 进入休眠模式 CLR...
微信小程序实现图片上传（清晰版...
在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 选择图片 在js文件中添加选择...
Maven打包子模块
项目结构1. project_01: 一个多模块的maven工程2. module_01: 工程pr...
Scala安装及设置查看源代码
文章目录一、安装Scala环境1.1、下载Scala1.2、配置scala环境变量1.3、测试是否安...
使用大规模数据注释和深度学习对...
使用大规模数据注释和深度学习对具有人类水平性能的组织图像进行全细胞分割摘要绪论Mesmer2.1Me...
【数据结构】TreeMap和T...
目录 1、TreeMap 1.1 TreeMap 的简介 1.2 TreeMap 的基本使用 2、...
Django之视图的使用
Django之视图的使用视图基本使用函数视图类视图视图与模板请求对象HttpRequest常见属性和...
零基础能学大数据吗？
大数据入门不像学一门编程语言，自学一段时间就OK了。大数据是需要站在编程的基础上学习的...
OperatorChain设计
在JobGraph构建过程中，会将满足链化条件的StreamOperator连接在一起...
Phoenix整合phoeni...
首先我们添加上maven依赖,可以看到5.1.2 对应的hbase是2.4对吧 然后添加了依赖,...
【华为机试真题详解 Pytho...
文章目录 前言题目描述输入描述输出描述题目解析参考代码 前言 《华为机试真题详解》专栏含牛客网...
Scala---Array方法
Scala之Array的方法 文章目录Scala之Array的方法数组声明一个数组1.元素操作替换...
内存避障的前世今生
相关 《内存避障：一个内存乱序实例》 《内存避障的前世今生》 0 总结 单核下的指令...