iview的tree组件，设置expand不生效，以及全部展开和全部合并的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010295735/article/details/83150278

前端框架用到了iview，使用tree组件的时候，数据是动态绑定的，页面控件调用如下：

<Tree :data="taskTreeData"></Tree>

methods中初始化数据的方法如下：

initTree() {
      let _this = this;
      //调用后台查询树的信息，此处略过，后台查询的返回结果示例如下
      var treeData = [
        {
          title: "模型任务",
          children: [
            {
              title: "单次任务",
              children: [
                {
                  title: "单次任务-1"
                }
              ]
            },
            {
              title: "定时任务"
            }
          ]
        },
        {
          title: "同步数据任务",
          children: [
            {
              title: "日任务"
            }
          ]
        },
        {
          title: "指标预警任务"
        }
      ];
      _this.taskTreeData = _this.treeAddRend(treeData);
    }

methods中全部展开或全部合并的方法如下：

    //展开或合并树，当flag为true时全部展开，flag为false时全部合并
    exchangeTree(flag) {
      this.taskTreeData = this.treeChangeExpand(this.taskTreeData, flag);
    },
    //递归给树设置expand
    treeChangeExpand(treeData, flag) {
      let _this = this;
      for (var i = 0; treeData && i < treeData.length; i++) {
        treeData[i].expand = flag;
        if (treeData[i].children) {
          treeData[i].children = _this.treeChangeExpand(treeData[i].children,flag);
        }
      }
      return treeData;
    }

测试发现并不生效。

对比发现，不调用上述自己写的treeChangeExpand方法设置expand，而是在初始化的时候就直接在treeData中写expand，如下：

则console.log(this.taskTreeData)，结果有expand并且有expand的get和set方法，如下，

而调用上述treeChangeExpand方法添加expand以后，打印出来的结果中有expand但没有expand的get和set方法。如下：

参考了https://blog.csdn.net/preferG/article/details/78278032，发现原来vue直接在json数据中添加属性是不行的，无法生成get和set方法，而需要使用vue的set方法。

扫描二维码关注公众号，回复： 4911003 查看本文章

将上述的treeChangeExpand方法改为如下，问题解决：

    treeChangeExpand(treeData, flag) {
      let _this = this;
      for (var i = 0; treeData && i < treeData.length; i++) {
        this.$set(treeData[i],'expand',flag); //重要！用set方法
        if (treeData[i].children) {
          treeData[i].children = _this.treeChangeExpand(treeData[i].children,flag);
        }
      }
      return treeData;
    }