专栏首页vue的实战tree组件在for循环中无法使用getCheckedNodes这个方法

tree组件在for循环中无法使用getCheckedNodes这个方法

报错显示

提示getCheckedNodes() 报错;

  <el-tree
    v-for="item in arr"
    :key="item.id"
    @check="check"
    ref="tree"
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5,3]">
  </el-tree>
  ok() {
     
        let res = this.$refs.tree.getCheckedNodes();
        let arr = [];
        res.forEach((item) => {
          arr.push(item.id)
        });
        var b = arr.join(",");
        console.log(b);
      },
以前是用这种方法

@check="check" 复选框点击的时候出发这个事件

   check(data) {
        // console.info(arr.indexOf('a'));//在IE某些版本中不支持,可以自行扩展
        var flag = false; //  数组中添加新新元素的标识
        var fl = this.gg.indexOf(data.id); // 判断数组中是否存在data.id
        // console.log(fl);
        if (fl<0) {  // 小于零代表数组中没有这个元素
          flag = true;

        }else {   //大于零标示数组中有这个元素
          flag = false;
        };
       var index =  data.id ;
       ####  //  index就是 返回的id
        // console.log(index);

        // 删除数组中指定元素的方法开始
        Array.prototype.aindexOf = function(val) {
          for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
          }
          return -1;
        };
        Array.prototype.remove = function(val) {
          var index = this.aindexOf(val);
          if (index > -1) {
            this.splice(index, 1);
          }
        };
        // 删除数组中指定元素的方法结束

        // 实际对数组的操作
        if(flag){
        // 没有就添加
         this.gg.push(index);
        }else {
          // 有就删除
         this.gg.remove(index);
          console.log("kk");
        }
        // console.log(this.gg);

      },

原理: 通过鼠标点击拿到选中的id,然后判断数组中存不存在这个id,有就删除,没有就添加这个id;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5在app端导出

    用户4344670
  • js分片

    用户4344670
  • better-scroll的使用

    用户4344670
  • Java之StringBuffer

    1.存储: append(data) 添加在最后 insert(index,data) 在制定位置添加2.删除: delete(start,end) 删除...

    lwen
  • [一]class 文件浅析 .class文件格式详解 字段方法属性常量池字段 class文件属性表 数据类型 数据结构

     本文旨在讲解class文件的整体结构信息,阅读本文后应该可以完整的了解class文件的格式以及各个部分的逻辑组成含义

    noteless
  • .Net 框架

    对于在.NET框架(.NET Framework)下进行开发的程序员来说,无法回避的一个问题就是:什么是.NET框架?它包含了哪些内容?为开发程序提供了哪些支持...

    张子阳
  • 插入、归并、堆、count、radix、快速排序算法运行时间

    把一个数组拆成左右两个部分,一直到不可拆分,然后对左右两个数组进行合并,合并方式为,新建左右两个数组来存储原有的左右数据,然后使用两个索引分别指向左右两个数组,...

    爬蜥
  • matlab批量灰色预测

    ----------------------------------我是快乐的分割线------------------------------------

    机器学习和大数据挖掘
  • android注解

    包 java.lang.annotation 中包含所有定义自定义注解所需用到的原注解和接口。 如接口 java.lang.annotation.Annot...

    提莫队长
  • 2020全球顶尖计算机科学家排名发布:两位华人学者入全球前10,Top 1000华人学者过百

    该排名收集了 6000 余名科学家的资料,并按照 h-index、DBLP、引用量等多项指标进行评估,从中选出了 top 1000 科学家。

    深度学习技术前沿公众号博主

扫码关注云+社区

领取腾讯云代金券