场景，在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;
})
}
}
网友评论