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 方法来打开嵌套对话框。

总结

在本博客中，我们学习了如何使用 Vue.js 和 Element UI 创建一个前端应用，实现了加载数据、添加对话框、查看对话框以及嵌套对话框的功能。这个示例项目可以作为一个起点，帮助你构建更复杂的前端应用，满足不同的需求。希望本博客对你有所帮助！