Vue.js: Implementing the view button of nested dialog boxes

Vue.js: Implementing the view button of nested dialog boxes

Vue.js is a popular JavaScript framework for building interactive, responsive front-end applications. This blog will introduce how to use Vue.js and the Element UI library to create a front-end application that includes a view button for nested dialog boxes, and how to hide the close button in the nested dialog box.

Requirements overview

We have a front-end application that displays patient record information, including checklists. We hope to achieve the following functions:

1. Display the patient's basic information (name, ID number, age, gender) on the page.
2. There is a "Load Data" button for loading checklist data through the interface.
3. There is an "Add" button that opens a dialog box where the user can enter new inspection records.
4. There is a "View" button that opens a dialog box showing the nested table.

Implementation steps

Step 1: Set up basic page structure

First, we need to set up the basic page structure, including patient information, medical record home page, medical record content card, etc. Within these elements we will place buttons to trigger the corresponding functionality. Here is sample code for the page structure:

<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>

In this example, we define page elements such as patient information, medical record home page, and medical record content card, as well as corresponding buttons to trigger functions such as loading data, opening the add dialog box, and opening the view dialog box.

Step 2: Implement the function of loading data

Next, we need to implement the function of loading data. On clicking the "Load Data" button, we will request the checklist data through the interface and display it in the table. Here is sample code for the load data function:

<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>

In this code, we use the Axios library to make a GET request to get the checklist data and store the data in the checkList variable. We also use the dataLoaded flag to control whether the data has been loaded.

Step 3: Implement the add dialog function

We also need to implement the function of adding a dialog box. When the user clicks the "Add" button, we will open a dialog box where the user can enter a new inspection record and submit it to the backend for saving. Here is sample code for adding dialog functionality:

<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>

In this dialog box, we use Element UI’s el-dialog and el-form components to create an input form. Users can enter information for new records into the form and click the "OK" button to submit the data.

In the Vue.js method, we implemented the openAddDialog method to open the dialog box, and the addNewRecord method to handle the logic of adding new records.

Step 4: Implement the view dialog function

Finally, we also need to implement the function of viewing the dialog box. When the user clicks the "View" button, we will open a dialog box containing a nested table. Here is sample code for the view dialog functionality:

<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>

In this dialog box, we also use the el-dialog component of Element UI, but we set the close button to invisible (show-close="false"), to meet demand. In the Vue.js method, we implemented the openNestedDialog method to open the nested dialog box.

Summarize

In this blog, we learned how to use Vue.js and Element UI to create a front-end application that implements the functions of loading data, adding dialog boxes, viewing dialog boxes, and nesting dialog boxes. This sample project can be used as a starting point to help you build more complex front-end applications to meet different needs. Hope this blog is helpful to you!