自定義的vue+element-ui三級聯動菜單


在使用element-ui的form做一個信息收集的表單時,遇到了根據  第一個下拉框  選擇的  角色id  作為  對  form中  其他下拉框   狀態  是否禁用 的標識。簡而言之,比如存在4個角色id(A,B,C,D),需要選擇的其余下拉框有X和Y。

在角色id為A,B時,X啟用,Y禁用

在角色id為C時,X啟用,Y也啟用

在角色id為D時,X禁用,Y禁用

其中X,Y是聯動菜單,光看規則也是有點頭大了😨!

為了確保XY不會擅自打開,一開始就禁用了這2個下拉框,也可以隱藏起來,在狀態是解開的時候再顯示。

需要注意的是,在選擇了角色id后,需要在當前的函數中寫獲取下級菜單X的方法,否則,會顯示X有值,並非已經獲取了X內容,而是顯示在X位置的數組並沒有執行獲取值的請求操作。

同理,在X值變化監聽函數內也要對應拉取Y的值,並對X和Y的禁用狀態進行修改。

可以使用watch來監聽這些值的禁用狀態變化,使用this.$set設置驗證條件是否添加required(進入監聽函數就要重置一次其為false,然后設置條件打開)

這里的思路是,

1.首先先啟用普適角色可以選擇的下拉框,監聽用戶選中的角色id,同時根據角色id獲取下一級菜單的下拉選項,逐層啟用或禁用。

2.當用戶在所有下拉菜單都打開的情況下修改中間某一層菜單的選項時,是根據當前角色id下可以被選擇的,修改后還要或重新賦值對應下級菜單的菜單項,或禁用相關菜單

  當用戶在全部啟用的情況下重新選擇角色id時,需要將1的步驟重新來過就可以了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM