若依分离版选择弹窗数据回读

本文记录了在若依框架中实现点击按钮弹出选择窗口,并将选择信息回读到父组件的过程。具体包括创建独立的弹窗页面,移除不必要的功能,以弹窗形式展示,并在用户页面引用该弹窗,实现数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近学习若依框架过程中想要实现点击按钮显示弹窗,在弹窗选择信息后回读到父组件中显示,初步测试符合要求,在这里记录一下

实现效果
点击图2【科室名称】的放大镜,弹出图1选择框,单击确定或者双击选择后回写到图2中,也可以回写多个选项,例如备注回写的科室领导
在这里插入图片描述
在这里插入图片描述

具体实现过程



1. 创建弹窗页面

弹窗页面借助若依代码生成功能,将生成的科室管理页面进行修改,作为独立页面放在ruoyi-ui/src/components下(components应该是公共组件页面,为保证页面整洁,在components下新建test文件夹,将selectDept.vue放入其中)

页面调整内容

  1. 直接复制科室管理页面,清理不需要的增删改查按钮及【修改科室管理对话框】
    在这里插入图片描述

  2. 使用el-dialog将整个页面以弹窗的形式展示

<template>
	<el-dialog title="科室选择"
             v-if="showFlag"
             :visible.sync="showFlag"
             :modal= false
             width="80%"
             center
  	>
  	代码...
	</el-dialog>
<template>
<script>
	代码...
</script>
  1. 引入科室管理的列表显示功能,新增回传数据保存数组和序号字段,创建“新增、单击、双击、确定选中”的方法,最后在列表展示板块进行调用
/** import引入内容(script中) */
import {
    listDept } from "@/api/test/dept";

/** data中新增回传数据数组及选择序号(script中) */
data(){
   
	代码...
	selectDeptId: undefined,
	selectedRows: [],
}

/** methods中新增选择、单击、双击、确定选中4个方法(script中) */
	handleCurrent(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值