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

Vue.js ：实现嵌套对话框的查看按钮

news 2025/6/30 5:12:19

Vue.js ：实现嵌套对话框的查看按钮

Vue.js 是一款流行的 JavaScript 框架，用于构建交互性强、响应式的前端应用程序。本博客将介绍如何使用 Vue.js 和 Element UI 库创建一个前端应用，其中包括了嵌套对话框的查看按钮，以及如何在嵌套对话框中隐藏关闭按钮。

需求概述

我们有一个前端应用，用于展示患者的病历信息，其中包括检查列表。我们希望实现以下功能：

在页面上显示患者的基本信息（姓名、身份证号、年龄、性别）。
有一个 “加载数据” 按钮，用于通过接口加载检查列表数据。
有一个 “添加” 按钮，用于打开一个对话框，用户可以在对话框中输入新的检查记录。
有一个 “查看” 按钮，用于打开一个对话框，显示嵌套的表格。

实现步骤

步骤 1: 设置基本页面结构

首先，我们需要设置基本的页面结构，包括患者信息、病历首页、病历内容卡片等。在这些元素中，我们将放置按钮来触发相应的功能。以下是页面结构的示例代码：

<template><div class="full-screen"><!-- 患者信息 --><!-- ...患者信息的代码... -->
<!-- 病历首页 -->
<!-- ...病历首页的代码... --><!-- 病历内容卡片 -->
<el-card class="box-card" style="width: 95%;"><!-- 表格标题 --><div><span style="font-size: 20px; font-weight: bold;">检查列表</span><el-button type="primary" style="float: right; margin-right: 20px;" @click="loadData">加载数据</el-button><el-button type="success" style="float: right; margin-right: 20px;" @click="openAddDialog">添加</el-button><el-button type="info" style="float: right; margin-right: 20px;" @click="openNestedDialog">查看</el-button></div><!-- 表格 --><el-table :data="checkList" style="width: 100%" stripe><!-- 表格列定义... --></el-table>
</el-card><!-- 添加对话框 -->
<!-- ...添加对话框的代码... --><!-- 查看对话框 -->
<!-- ...查看对话框的代码... --><!-- 嵌套对话框 -->
<!-- ...嵌套对话框的代码... -->
</div>
</template>

在这个示例中，我们定义了患者信息、病历首页、病历内容卡片等页面元素，以及相应的按钮来触发加载数据、打开添加对话框、打开查看对话框等功能。

步骤 2: 实现加载数据功能

接下来，我们需要实现加载数据的功能。在点击 “加载数据” 按钮时，我们将通过接口请求检查列表数据，并将其显示在表格中。以下是加载数据功能的示例代码：

<script>
import axios from 'axios';
export default {data() {return {checkList: [], // 存储检查列表数据// ...其它数据...};},methods: {loadData() {// 发起查询接口 http://localhost:8081/Modical_technologyController/list// 更新 checkList 数据axios.get('http://localhost:8081/Modical_technologyController/list').then((response) => {this.checkList = response.data;// 设置数据已加载标志位this.dataLoaded = true;}).catch((error) => {console.error('查询失败', error);});},// ...其它方法...},// ...其它代码...
};
</script>

在这个代码中，我们使用 Axios 库发起 GET 请求来获取检查列表数据，并将数据存储在 checkList 变量中。我们还使用 dataLoaded 标志位来控制数据是否已加载。

步骤 3: 实现添加对话框功能

我们还需要实现添加对话框的功能。当用户点击 “添加” 按钮时，我们将打开一个对话框，用户可以在其中输入新的检查记录，并提交到后端保存。以下是添加对话框功能的示例代码：

<el-dialog :visible.sync="addDialogVisible" title="添加记录"><!-- 在这里放置输入表单 --><el-form :model="newRecord" ref="newRecordForm" label-width="80px"><!-- 输入表单项... --></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="addNewRecord">确定</el-button></span>
</el-dialog>

在这个对话框中，我们使用了 Element UI 的 el-dialog 和 el-form 组件来创建一个输入表单。用户可以在表单中输入新记录的信息，并点击 “确定” 按钮来提交数据。

在 Vue.js 的方法中，我们实现了 openAddDialog 方法来打开对话框，以及 addNewRecord 方法来处理添加新记录的逻辑。

步骤 4: 实现查看对话框功能

最后，我们还需要实现查看对话框的功能。当用户点击 “查看” 按钮时，我们将打开一个对话框，其中包含一个嵌套的表格。以下是查看对话框功能的示例代码：

<el-dialog :visible.sync="viewDialogVisible" title="查看记录" :show-close="false"><!-- 在这里显示查看内容 --><p>这里是查看内容。</p><span slot="footer" class="dialog-footer"><el-button @click="viewDialogVisible = false">关闭</el-button></span>
</el-dialog>

在这个对话框中，我们同样使用了 Element UI 的 el-dialog 组件，但我们将关闭按钮设置为不可见（show-close="false"），以满足需求。在 Vue.js 的方法中，我们实现了 openNestedDialog 方法来打开嵌套对话框。