VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁(yè)面步驟
分布式醫(yī)療掛號(hào)系統(tǒng) | 開發(fā)醫(yī)院設(shè)置頁(yè)面
在分布式醫(yī)療掛號(hào)系統(tǒng)中，前端主要使用的兩個(gè)技術(shù)是Vue和ElementUI。醫(yī)院設(shè)置微服務(wù)模塊的后端之前已經(jīng)完成，現(xiàn)在需要借助Vue+ElementUI完成醫(yī)院設(shè)置微服務(wù)模塊的前端頁(yè)面：
一、顯示記錄列表功能
1.顯示列表組件
在頁(yè)面顯示所有記錄列表使用ElementUI的表格組件會(huì)更加直觀，我們選用帶斑馬紋表格組件。
2.分頁(yè)組件
3.條件查詢組件
二、刪除記錄功能
1.刪除單條記錄
要完成刪除一條記錄的功能，我們的思路是為每一條記錄添加一個(gè)刪除按鈕，點(diǎn)擊按鈕后會(huì)觸發(fā)事件，調(diào)用方法進(jìn)而實(shí)現(xiàn)功能。
2.批量刪除記錄
三、鎖定和解鎖功能
在醫(yī)院設(shè)置表創(chuàng)建時(shí)，我們對(duì)表中的status字段做過(guò)約定：
status = 1：記錄可用，處于解鎖狀態(tài)
status = 0：記錄不可用，處于鎖定狀態(tài)
我們現(xiàn)在需要做的鎖定和解鎖功能就是，當(dāng)這條記錄可用時(shí)，將其鎖定，不可用時(shí)取消鎖定。
四、添加記錄功能
五、修改功能
六、解決組件重用問(wèn)題
在上述完成的醫(yī)院設(shè)置前端頁(yè)面中，存在一個(gè)小bug，當(dāng)點(diǎn)擊修改按鈕，回顯所有數(shù)據(jù)后，若在此時(shí)點(diǎn)擊醫(yī)院設(shè)置添加按鈕，并不會(huì)將數(shù)據(jù)清空。我們的保存和修改是公用了一個(gè)頁(yè)面(組件)來(lái)完成的開發(fā)。
問(wèn)題：使用vue-router導(dǎo)航切換時(shí)，如果兩個(gè)路由都渲染了同一個(gè)組件，那么組件的生命周期方法(created或mounted)不會(huì)再次被調(diào)用。組件會(huì)被重用，即顯示上一個(gè)路由渲染出來(lái)的頁(yè)面。
解決方案：可以在 router-view上加上一個(gè)唯一的key，來(lái)保證路由切換時(shí)都會(huì)重新觸發(fā)生命周期方法，確保組件被重新初始化。
這個(gè)解決方案，在我們的Vue框架中已經(jīng)寫好，我們?cè)?code>src/views/layout/components/AppMain.vue 文件下將其打開即可：
至此，分布式醫(yī)療掛號(hào)系統(tǒng)的后臺(tái)頁(yè)面功能開發(fā)已經(jīng)完成。
項(xiàng)目已同步至github：https://github.com/Guoqianliang/yygh_admin
以上就是VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁(yè)面步驟的詳細(xì)內(nèi)容，更多關(guān)于VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)醫(yī)院設(shè)置頁(yè)面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
django使用channels2.x實(shí)現(xiàn)實(shí)時(shí)通訊
這篇文章主要介紹了django使用channels2.x實(shí)現(xiàn)實(shí)時(shí)通訊，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03
在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法
NProgress.js是輕量級(jí)的進(jìn)度條組件，使用簡(jiǎn)便，可以很方便集成到單頁(yè)面應(yīng)用中。這篇文章主要介紹了在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法,需要的朋友可以參考下2018-01-01
基于Vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能
這篇文章主要介紹了vue實(shí)現(xiàn)平滑過(guò)渡的拖拽排序功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項(xiàng)目安裝less和less-loader的詳細(xì)步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
全局變量（函數(shù)等）可以在任意組件內(nèi)訪問(wèn),可以當(dāng)組件間的傳值使用,這篇文章給大家介紹vue3 定義使用全局變量的示例詳解,感興趣的朋友跟隨小編一起看看吧2023-10-10
本文主要介紹了vue usePop彈窗控制器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
如何實(shí)現(xiàn)vue加載指令 v-loading
在日常的開發(fā)中,加載效果是非常常見的,但是怎么才能方便的使用,本文介紹如何實(shí)現(xiàn)vue加載指令 v-loading,感興趣的朋友一起看看吧2024-01-01