前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >tree组件在for循环中无法使用getCheckedNodes这个方法

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

作者头像
用户4344670
发布2019-08-28 11:14:17
3.5K0
发布2019-08-28 11:14:17
举报
文章被收录于专栏:vue的实战

报错显示

提示getCheckedNodes() 报错;
代码语言:javascript
复制
  <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>
代码语言:javascript
复制
  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" 复选框点击的时候出发这个事件
代码语言:javascript
复制
   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;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 提示getCheckedNodes() 报错;
  • @check="check" 复选框点击的时候出发这个事件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档