Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "VUE how to develop the hospital setting page of the distributed medical registration system", so the editor summarizes the following contents for you, the content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "VUE how to develop the hospital setting page of the distributed medical registration system" article.

Distributed Medical Registration system | develop hospital settings page

In the distributed medical registration system, the two main technologies used in the front end are Vue and ElementUI. The backend of the hospital micro-service module has been completed before, and now you need to complete the front-end page of the micro-service module with the help of Vue+ElementUI:

First, display record list function 1. Show list components

Zebra striped table development document:

It is more intuitive to display a list of all records on the page using the table component of ElementUI, and we choose the table component with zebra stripes.

two。 Paging component

3. Conditional query component

Second, delete record function 1. Delete a single record

To complete the function of deleting a record, our idea is to add a delete button for each record. After clicking the button, the event will be triggered and the method will be called to achieve the function.

two。 Batch delete records

Third, lock and unlock function

When creating the hospital settings table, we made a convention on the status field in the table:

Status = 1: record is available and unlocked

Status = 0: record is not available and is locked

What we need to do now to lock and unlock the record is to lock it when it is available and unlock it when it is not available.

Fourth, add recording function

V. modify the function

Sixth, solve the problem of component reuse

In the above completed hospital settings front-end page, there is a small bug. When you click the modify button to echo all the data, if you click the hospital settings add button at this time, the data will not be emptied. Our saving and modification is done by sharing a page (component).

Problem: when using vue-router navigation switching, if both routes render the same component, the component's lifecycle method (created or mounted) will not be called again. The component is reused to display the page rendered by the previous route.

Solution: a unique key can be added to the router-view to ensure that the lifecycle method is re-triggered when the route is switched, ensuring that the component is reinitialized.

This solution has been written in our Vue framework, and we can open it in the src/views/layout/components/AppMain.vue file:

The above is the content of this article on "how to develop the hospital setup page of distributed medical registration system by VUE". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.