如題,我有一個Tree組件,動態更新check選中子級列表的時候,取消勾選了再點擊選中時復選框樣式不是勾選狀態,但是數據已經有了。
對此解決方案是:將初始化時Tree組件data數據深拷貝一遍再去判斷哪個子級列表需要選中,然后得到的數據再賦給Tree組件data。
或許有人問初始化數據是什么,其實就是你進到頁面時Tree渲染時的data數據。比如你點擊某個數據去顯示這個數據下在Tree組件列表中需要勾選的數據。你點擊第一次的時候勾選沒問題,
但是你取消這個子級勾選然后再次選中這個子級時選中狀態沒改變的時候,這個時候先把初始化數據深拷貝一遍然后再去設置哪些需要數據需要選中把他們的checked改成true其他的改為false
就好了。
如圖
Tree組件data深拷貝代碼:
1 const deepCopy = (source) => { // source就是原初始化Tree組件data數據 2 var sourceCopy = source instanceof Array ? [] : {}; 3 for (var item in source) { 4 sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]; 5 } 6 return sourceCopy; 7 }
然后再遍歷需要勾選的數據和初始化數據
1 const getTreeList = (checkList, allList) => {// checkList為需要勾選的數據 ,allList為整個需要渲染Tree組件的初始化數據且需要深拷貝過 2 let list = [] 3 allList.forEach(menu => { 4 for(let i = 0, len = checkList.length; i<len; i++) { 5 if(checkList[i].menuCode === menu.menuCode) { 6 menu.checked = true 7 break; 8 } else { 9 menu.checked = false 10 } 11 } 12 list.push(menu) 13 }) 14 return list 15 }