我的頁面如下圖(菜單權限的編輯):
我最開始的思路是在初始化的時候給控件的屬性 default-checked-keys 一個默認選中的key數組(比如 defaultKeys 變量,且是雙向綁定),同時綁定 check 事件,在選中的時候獲取到key然后賦值給 defaultKeys。
但遇到了以下問題
1. 當如上圖 最新安全消息 按鈕的key放到 defaultKeys 中,無論子元素是否在改變量中這一塊都會全部選中
解決辦法:避免母tab放在 defaultKeys 中,可以在賦值給 defaultKeys 前先清除母tab的key值
2. 因為 defaultKeys 是雙向綁定的,且每次在選中的時候獲取到key然后賦值給 defaultKeys,按理來說保存的時候拿 defaultKeys 即可,但是后端php在其他地方拿這個菜單列表的規則是:如果沒有母菜單,子菜單是不會顯示出來的,所以這最終導致拿到的數據不完整。
解決:在保存的時候用以下代碼即可(注意在用$refs需要給控件一個ref值,如我的是ref="ww"):
// 勾選的key var checkedKeys = this.$refs.ww.getCheckedKeys() // 暫選狀態的母tab的key var halfKeys = this.$refs.ww.getHalfCheckedKeys()) // 合並兩個數組 save = checkedKeys.concat(halfKeys)