VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)的醫(yī)院設(shè)置頁面步驟
分布式醫(yī)療掛號系統(tǒng) | 開發(fā)醫(yī)院設(shè)置頁面
在分布式醫(yī)療掛號系統(tǒng)中，前端主要使用的兩個技術(shù)是Vue和ElementUI。醫(yī)院設(shè)置微服務(wù)模塊的后端之前已經(jīng)完成，現(xiàn)在需要借助Vue+ElementUI完成醫(yī)院設(shè)置微服務(wù)模塊的前端頁面：
一、顯示記錄列表功能
1.顯示列表組件
在頁面顯示所有記錄列表使用ElementUI的表格組件會更加直觀，我們選用帶斑馬紋表格組件。
2.分頁組件
3.條件查詢組件
二、刪除記錄功能
1.刪除單條記錄
要完成刪除一條記錄的功能，我們的思路是為每一條記錄添加一個刪除按鈕，點(diǎn)擊按鈕后會觸發(fā)事件，調(diào)用方法進(jìn)而實(shí)現(xiàn)功能。
2.批量刪除記錄
三、鎖定和解鎖功能
在醫(yī)院設(shè)置表創(chuàng)建時，我們對表中的status字段做過約定：
status = 1：記錄可用，處于解鎖狀態(tài)
status = 0：記錄不可用，處于鎖定狀態(tài)
我們現(xiàn)在需要做的鎖定和解鎖功能就是，當(dāng)這條記錄可用時，將其鎖定，不可用時取消鎖定。
四、添加記錄功能
五、修改功能
六、解決組件重用問題
在上述完成的醫(yī)院設(shè)置前端頁面中，存在一個小bug，當(dāng)點(diǎn)擊修改按鈕，回顯所有數(shù)據(jù)后，若在此時點(diǎn)擊醫(yī)院設(shè)置添加按鈕，并不會將數(shù)據(jù)清空。我們的保存和修改是公用了一個頁面(組件)來完成的開發(fā)。
問題：使用vue-router導(dǎo)航切換時，如果兩個路由都渲染了同一個組件，那么組件的生命周期方法(created或mounted)不會再次被調(diào)用。組件會被重用，即顯示上一個路由渲染出來的頁面。
解決方案：可以在 router-view上加上一個唯一的key，來保證路由切換時都會重新觸發(fā)生命周期方法，確保組件被重新初始化。
這個解決方案，在我們的Vue框架中已經(jīng)寫好，我們在src/views/layout/components/AppMain.vue 文件下將其打開即可：
至此，分布式醫(yī)療掛號系統(tǒng)的后臺頁面功能開發(fā)已經(jīng)完成。
項(xiàng)目已同步至github：https://github.com/Guoqianliang/yygh_admin
以上就是VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)的醫(yī)院設(shè)置頁面步驟的詳細(xì)內(nèi)容，更多關(guān)于VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)醫(yī)院設(shè)置頁面的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則
表單校驗(yàn)是注冊環(huán)節(jié)中必不可少的操作,表單校驗(yàn)可以提醒用戶填寫數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的效性,也可以防止用戶因誤操作而占用服務(wù)器資源,這篇文章主要給大家介紹了關(guān)于Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue中的v-model原理,與組件自定義v-model詳解
這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細(xì)介紹兩者的共同點(diǎn)和區(qū)別，通過圖文介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
前端vue項(xiàng)目debugger調(diào)試操作詳解
在vue項(xiàng)目調(diào)試的時候,代碼里面標(biāo)注debugger,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目debugger調(diào)試操作的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下2021-09-09
在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語言來完成一個項(xiàng)目,因此就有可能出現(xiàn)不同語言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了詳解Vue快速零配置的打包工具——parcel，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue中如何使用vue-baberrage生成彈幕，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12