版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/preferG/article/details/78278032
最近使用了一下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>',
}]
}]
}]
}
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 有关使用及其遇到的问题。方便小伙伴们在使用的时候,也会遇到这样的错误。