iview tree checked 问题：子节点选中了，但是父节点没选中

　　

　　//在树状图所有层级找到 id等于x102的节点。

              let id=“x102”；

              let plot = util.findNode(this.treeData[0], id);

 

              //plot.checked=true; // 树状图点击一下才会显示选中状态。

              //this.$set(plot.checked, true);//报错：属性不存在。

              this.$set(plot,"checked", true); //正确

              console.log('plot',plot.checked); //true

util.findNode = function (tree, id) {
  if (tree.id === id) {
    return tree;
  }

  let stack = [];
  stack.push(tree);
  var tmpNode;
  while (stack.length > 0) {
    tmpNode = stack.pop();
    if (tmpNode.id === id) {
      return tmpNode;
    }
    if (tmpNode.children && tmpNode.children.length > 0) {
      var i = tmpNode.children.length - 1;
      for (i = tmpNode.children.length - 1; i >= 0; i--) {
        stack.push(tmpNode.children[i]);
      }
    }
  }
};

 

拓展知识：

一、修改对象的某个属性：

https://blog.csdn.net/panyang01/article/details/76665448

Vue2.0 $set()的正确使用方式

vue2.0 给data对象新增属性，并触发视图更新

如下代码，给 student对象新增 age 属性

data () {
    return {
        student: {
            name: '',
            sex: ''
        }
    }
}

 

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () {
    this.student.age = 24
}

 

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

但是，值得注意的是，网上一些资料写的$set()用法存在一些问题，导致在新接触这个方法的时候会走一些弯路！

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {
    this.$set(this.student.age, 24)
}

 

正确写法：this.$set(this.data,”key”,value’)

mounted () {
    this.$set(this.student,"age", 24)
}

 

二、修改数组的某个元素：

https://blog.csdn.net/zsm4623/article/details/88529893

vue中的$set和Vue.set方法

当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变
在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。

<div id="app">
	<p v-for="item in items" v-once>{{item}}</p>
	<button @click="btn()">添加</button>
</div>

 

new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.items[1] = 'd'
			console.log(this.items);
		}
	}
})

 

发现修改失败。

Vue.set() 方法
参数1： 要修改的对象
参数2： 属性
参数3： 属性的值是啥
返回值：已经修改好的值

有三种方法可以实现，分别是Vue.set, vm.$set, replace

var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			Vue.set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

 

发现修改完了。

 var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.$set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

修改完毕。