使用iview的一些问题及其解决办法

最近使用了一下iview,iview是一套基于 Vue.js 的高质量 UI 组件库，使我们在做前端和后端的时候，有更多的时间花在后台的优化上面，大部分优化就交给iview来帮我们实现啦。iview 官方网址。iview上手还是非常简单的。相比element ui 简单的多

当然一个新的组件就意味着多了一个坑。有坑我们就需要想办法解决。谁叫我们都拿着小铲子在挖坑给填坑的人呢，不开玩笑了。下面进入正题。

今天在做权限管理的时候用到了iview提供的tree 树形菜单这个组件。一开始按着文档编写 ，没问题。在修改权限的时候碰到了选中了选中了标签，在次点击的时候不能反选。

baseData: [{                    expand: true,                    title: 'parent 1',                    children: [{                        title: 'parent 1-0',                        expand: true,                        disabled: true,                        children: [{                            title: 'leaf',                            disableCheckbox: true                        }, {                            title: 'leaf',                        }]                    }, {                        title: 'parent 1-1',                        expand: true,                        checked: true,                        children: [{                            title: '<span style="color: red">leaf</span>',                        }]                    }]                }]            }

这是tree的json结构，直接在文档拷过来的，可是大家都知道，后台不可能完全按着他的结构走。我后台返回的json结构是下面的格式

baseData: [{                    title: 'parent 1',                    children: [{                        title: 'parent 1-0',                        children: [{                            title: 'leaf'                        }, {                            title: 'leaf',                        }]                    }, {                        title: 'parent 1-1',                        children: [{                            title: '<span style="color: red">leaf</span>',                        }]                    }]                }]            }

在添加权限的时候全都正常，在修改的时候 我看浏览器里面 给我的json添加了 checked属性。我一想这么智能了。没在意，可是当我拿这个值的时候返回的确实undefined。但是就不解。后台我发现iview添加的checked属性比呢没有get set 方法、

修正方式：获取到json后手动添加checked属性 使用 Vue.set 方法 具体方式 使用递归的方式 针对每个节点 都添加checked 属性 Vue.set(item,"checked",false);第一个参数是当前节点，第二个参数是要添加的属性 ，第三个参数为 属性的值。

Vue.set 方法是vue 给我们提供的 ，主要设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

具体文档地址

好啦。问题解决啦。并不是什么坑，其实使我们在开发的时候没有注意人家的每一个属性的用途，导致我们会犯傻。日后会继续更新iview 有关使用及其遇到的问题。方便小伙伴们在使用的时候，也会遇到这样的错误。