场景,在iview的<Tree>标签使用过程中遇到了一个小小的BUG。
请求回来数据,我手动设置了json数据,此时checked设为true,默认勾选了一些子节点。
然后用户手动点击勾选树其中的一个节点,再点击取消选择,dom样式上不会再次改变了,点半天都是勾选或者未勾选其中一个状态,但是绑定的数据变了,data中checked为true样式却不会跟着改变。
问题1:iview的<Tree>设置接收的checked(勾选)参数是布尔类型,而后台返回的是字符串‘true’,所以会报错。
问题2:树形结构组件渲染有问题
项目中设置用户权限时用到树形组件,在用户列表中点击设置权限按钮弹出modal框,点击按钮的同时请求数据回来渲染树形结构,一般是第一次点击没问题,当点击其他用户的设置权限按钮渲染的树形结构就有问题。
/树形组件
<Tree :data="curTreeData" show-checkbox ></Tree>
//js
data() {
curTreeData = [];
}
...
methods:{
getTreeData: function () {
getAllResources().then(res => {
this.curTreeData = res.data;
})
}
}
解决办法:每次请求树形数据之前先将curTreeData(渲染Tree所绑定的json对象)初始化
methods:{
getTreeData: function () {
this.curTreeData = [];//初始化
getAllResources().then(res => {
this.curTreeData = res.data;
})
}
}