zoukankan      html  css  js  c++  java
  • 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);
    		}
    	}
    })
    

    item
    发现修改失败。

    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)
    		}
    	}
    })
    

    Vue.set
    发现修改完了。

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

    vm.$set

    修改完毕。

    树立目标,保持活力,gogogo!
  • 相关阅读:
    Eclipse背景颜色修改
    使用主键或者索引提高SQL语句效率的建议
    Mysql批量插入executeBatch测试
    【php增删改查实例】第十三节
    【php增删改查实例】第十二节
    【php增删改查实例】第十一节
    【php增删改查实例】第十节
    【php增删改查实例】第九节
    【php增删改查实例】第八节
    【php增删改查实例】第六节
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/14341386.html
Copyright © 2011-2022 走看看