欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue框架編輯接口頁(yè)面下拉級(jí)聯(lián)選擇并綁定接口所屬模塊

 更新時(shí)間:2022年05月26日 14:19:53   作者:把蘋(píng)果咬哭的測(cè)試筆記  
這篇文章主要為大家介紹了vue框架編輯接口頁(yè)面實(shí)現(xiàn)下拉級(jí)聯(lián)選擇以及綁定接口所屬模塊,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)開(kāi)發(fā)

繼續(xù)更新

停更得有半年,最近待業(yè)家中沒(méi)有理由不繼續(xù)更新了。本來(lái)是打算做別的功能,但是我的重新調(diào)試環(huán)境的時(shí)候發(fā)現(xiàn)了bug,搞半天原來(lái)是因?yàn)闆](méi)實(shí)現(xiàn)接口與模塊的綁定,導(dǎo)致點(diǎn)擊左側(cè)模塊樹(shù)之后列表頁(yè)就沒(méi)數(shù)據(jù)。氣死我了,那先來(lái)把這個(gè)坑填上。

先看一下最后的功能效果動(dòng)圖。

因?yàn)橥晟七@個(gè)功能要涉及一些之前功能的改動(dòng),所以接下來(lái)以實(shí)際的開(kāi)發(fā)修改過(guò)程來(lái)記錄內(nèi)容(源碼獲取在文末):

尋找級(jí)聯(lián)組件后端返回組件需要的數(shù)據(jù)內(nèi)容修改前端內(nèi)容,使用級(jí)聯(lián)組件修改新增、編輯功能,保存選擇的模塊修改編輯回顯功能,顯示對(duì)應(yīng)節(jié)點(diǎn)

一、級(jí)聯(lián)選擇器組件

elementUI 官網(wǎng),找到級(jí)聯(lián)選擇器組件。

查看組件的功能屬性,發(fā)現(xiàn)可以滿(mǎn)足我的需求:

懸停觸發(fā)級(jí)聯(lián)菜單支持單獨(dú)選擇每一級(jí)支持搜索節(jié)點(diǎn)

二、后端返回組件需要的數(shù)據(jù)

查看組件屬性得知所需的數(shù)據(jù)內(nèi)容,value用于存放選擇的節(jié)點(diǎn),注意這里存進(jìn)去的是數(shù)組。而options就是數(shù)據(jù)源來(lái),也是一個(gè)數(shù)組,里面的屬性有:

value,選擇節(jié)點(diǎn)時(shí)候的賦值label,顯示的節(jié)點(diǎn)文本內(nèi)容children,子節(jié)點(diǎn)嵌套的內(nèi)容

其實(shí)這里模塊節(jié)點(diǎn)里要用的數(shù)據(jù),就是左側(cè)模塊樹(shù)的數(shù)據(jù)。

對(duì)于這個(gè)模塊樹(shù)我后端是有一個(gè)專(zhuān)門(mén)的接口返回的,所以我打算復(fù)用這個(gè)接口。思路就是當(dāng)這個(gè)接口被請(qǐng)求的時(shí)候,我再把這個(gè)接口返回的數(shù)據(jù)賦值options即可。

但是用下來(lái)發(fā)現(xiàn)后端原接口是少了一個(gè)返回字段value,會(huì)導(dǎo)致選擇的時(shí)候有bug,所以我修改了后端接口,增加一個(gè)字段的返回。

新增的字段里的值我使用模塊id,不會(huì)重復(fù)。

F12看下修改后的接口返回,沒(méi)問(wèn)題。

三、前端使用級(jí)聯(lián)組件

后端數(shù)據(jù)有了,下面改前端,找到編輯頁(yè)面里的對(duì)應(yīng)位置,原來(lái)的內(nèi)容是我臨時(shí)放置的一個(gè)下拉選擇框(圖中被注釋部分),現(xiàn)在用級(jí)聯(lián)組件的內(nèi)容(紅框部分)替換上去。

說(shuō)一下用到的組件屬性:

:show-all-levels="false": 輸入框中是否顯示選中值的完整路徑,false就只顯示最后一級(jí)。

filterable: 是否可搜索選項(xiàng),開(kāi)啟

placeholder: 占位符,顯示背景內(nèi)容

clearable:支持清空選項(xiàng)

v-model: 綁定你選中的節(jié)點(diǎn)value 到某個(gè)字段上

options: 后端接口返回的數(shù)據(jù),存放在這個(gè)字段上

:props:用到的一些其他配置選項(xiàng)

@change:當(dāng)選中節(jié)點(diǎn)變化時(shí)觸發(fā)

{ expandTrigger: 'hover', checkStrictly: true },關(guān)于用到的2個(gè) props,作用分別是:

expandTrigger:次級(jí)菜單的展開(kāi)方式,hover是鼠標(biāo)懸停展開(kāi),我覺(jué)得比較方便。

checkStrictly: 是否嚴(yán)格的遵守父子節(jié)點(diǎn)不互相關(guān)聯(lián),true 就可以支持任意一個(gè)節(jié)點(diǎn)的選擇。

四、新增、編輯里保存選擇的模塊

我重新查看了前端點(diǎn)擊保存按鈕的代碼,發(fā)現(xiàn)會(huì)判斷此時(shí)是新增還是編輯,從而選擇調(diào)用對(duì)應(yīng)的新增或者修改方法。

進(jìn)一步查看這2個(gè)方法,發(fā)現(xiàn)里面關(guān)于請(qǐng)求數(shù)據(jù)的處理都封裝在另一個(gè)方法handleSaveRequest里。

找到方法了對(duì)應(yīng)的模塊id的字段,之前我沒(méi)實(shí)現(xiàn)這個(gè)功能的時(shí)候,是寫(xiě)死了 0。

這里我前端做了一下處理,因?yàn)楹蠖私涌诮邮盏絽?shù)是int,但是組件這里 value 是數(shù)組,通過(guò)在handleChange方法里加log打印,查看控制臺(tái)里的返回便知。

這里我操作了2次,發(fā)現(xiàn)數(shù)組的最后一個(gè)是你選擇的節(jié)點(diǎn),所以我要取出這個(gè)最后一個(gè)節(jié)點(diǎn)用來(lái)請(qǐng)求后端接口,索引就是數(shù)組length-1。

本來(lái)以為這樣就可以了,后來(lái)調(diào)試時(shí)候發(fā)現(xiàn)bug,最后發(fā)現(xiàn)新增和編輯的時(shí)候,還不能統(tǒng)一都這么處理。

因?yàn)樾略龅臅r(shí)候傳入的是數(shù)組,但是編輯的時(shí)候就只是一個(gè)值,所以這里更具當(dāng)前的頁(yè)面狀態(tài)是編輯還是新增加了判斷,分開(kāi)處理。

調(diào)試一下編輯保存,查看入?yún)⒁约皵?shù)據(jù)庫(kù)落庫(kù)都正常。

調(diào)試一下新增保存,查看入?yún)⒁约皵?shù)據(jù)庫(kù)落庫(kù)都正常。

五、編輯回顯模塊節(jié)點(diǎn)

此時(shí)我點(diǎn)擊編輯按鈕打開(kāi)編輯頁(yè)面,發(fā)現(xiàn)是沒(méi)顯示已保存的模塊節(jié)點(diǎn)的。

F12 查看打開(kāi)編輯調(diào)用的接口,發(fā)現(xiàn)接口返回里有了 moduleId 。

但是我原接口里返回的是 int 類(lèi)型,這里看控制臺(tái)里組件里的是字符串,所以我嘗試修改了下后端的接口,以及數(shù)據(jù)庫(kù)的字段類(lèi)型,正常了。

看下效果。

坑填上了,完整代碼更新

前端:

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

以上就是vue框架編輯接口頁(yè)面下拉級(jí)聯(lián)選擇并綁定接口所屬模塊的詳細(xì)內(nèi)容,更多關(guān)于vue下拉級(jí)聯(lián)選擇并綁定接口所屬模塊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue移動(dòng)端路由切換實(shí)例分析

    vue移動(dòng)端路由切換實(shí)例分析

    本篇文章給大家分享了vue移動(dòng)端路由切換實(shí)例以及相關(guān)知識(shí)點(diǎn),對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。
    2018-05-05
  • VSCode開(kāi)發(fā)UNI-APP 配置教程及插件

    VSCode開(kāi)發(fā)UNI-APP 配置教程及插件

    uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架,今天通過(guò)本文給大家分享VSCode開(kāi)發(fā)UNI-APP 配置教程及插件推薦與注意事項(xiàng),感興趣的朋友一起看看吧
    2021-08-08
  • VUE里如何修改element-ui的顯示層次與上下間隔

    VUE里如何修改element-ui的顯示層次與上下間隔

    這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vuex中mutations和actions的區(qū)別及說(shuō)明

    Vuex中mutations和actions的區(qū)別及說(shuō)明

    這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼

    Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼

    工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告,但是找了好多日歷組件都不是很符合需求,只好自己手寫(xiě)一個(gè)日歷組件,順便記錄一下,希望對(duì)大家有所幫助
    2023-04-04
  • vue中下載文件后無(wú)法打開(kāi)的坑及解決

    vue中下載文件后無(wú)法打開(kāi)的坑及解決

    這篇文章主要介紹了vue中下載文件后無(wú)法打開(kāi)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù)

    Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù)

    這篇文章主要介紹了Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)

    Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí)

    這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • Vue觸發(fā)式全局組件構(gòu)建的方法

    Vue觸發(fā)式全局組件構(gòu)建的方法

    這篇文章主要介紹了Vue觸發(fā)式全局組件構(gòu)建的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • 使用props傳值時(shí)無(wú)法在mounted處理的解決方案

    使用props傳值時(shí)無(wú)法在mounted處理的解決方案

    這篇文章主要介紹了使用props傳值時(shí)無(wú)法在mounted處理的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評(píng)論