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

goodluckyswk

已于 2023-03-17 15:15:01 修改

阅读量2.5k

点赞数 4

分类专栏：若依框架学习文章标签： java

于 2023-03-17 15:02:38 首次发布

本文链接：https://blog.csdn.net/goodluckyswk/article/details/129619807

版权

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

摘要由CSDN通过智能技术生成

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

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

具体实现过程

1. 创建弹窗页面

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

页面调整内容

直接复制科室管理页面，清理不需要的增删改查按钮及【修改科室管理对话框】
使用el-dialog将整个页面以弹窗的形式展示

<template>
	<el-dialog title="科室选择"
             v-if="showFlag"
             :visible.sync="showFlag"
             :modal= false
             width="80%"
             center
  	>
  	代码...
	</el-dialog>
<template>
<script>
	代码...
</script>

引入科室管理的列表显示功能，新增回传数据保存数组和序号字段，创建“新增、单击、双击、确定选中”的方法，最后在列表展示板块进行调用

/** import引入内容（script中） */
import {
    listDept } from "@/api/test/dept";

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

/** methods中新增选择、单击、双击、确定选中4个方法（script中） */
	handleCurrent(