iview中，tree 无法将checked改为false

Question

做权限控制，根据后台传回来的权限，对树形表做选中显示设置checked=true,是可以的。权限改变设置checked=false,就会更改失败，checked还是为true

---

this.permissionTree[0].children.forEach((item, index) => {
                if (item.children.length>=0) {
                    let childrenArr = [];
                    childrenArr = item.children.filter(child => {
                        if (child.permission !== undefined) {
                            if (role.permissions.indexOf(child.permission) >= 0) {
                                child.checked = true;
                            }else{
                                child.checked = false;
                            };
                            return child;
                        } else {
                            return child;
                        }
                    });
                    if(childrenArr.length>0){
                        item.children=childrenArr;
                        permissionTreeList.push(item);
                    }   
                    console.info('childrenArr',childrenArr)                
                }                
            });

Answer 1

改用this.permissionTree[0].children.map  返回新数组试下  

应该是这个https://cn.vuejs.org/v2/guide...

Answer 2

数组内部更新未触发视图更新。楼上已经给了传送门了。

Answer 3

大概知道是视图未更新的原因，小弟还是没有解决方案，tree好像没有clear()的方法

Answer 4

2.0 数组不支持响应式，使用 this.$set(child.checked, false)

Answer 5

更新之前将Tree组件的data先清空试一下，还有遇到子级修改不成功时将原初始化Tree组件data数组深拷贝一下再重新渲染就好了。
以下是深拷贝代码
`
const deepCopy = (source) => {
var sourceCopy = source instanceof Array ? [] : {};
for (var item in source) {

sourceCopy[item] = typeof source[item] === 'object' ?  objDeepCopy(source[item]) : source[item];

}
return sourceCopy;
}
`source就是原Tree组件data数组代码，然后重新渲染Tree组件data就好了