项目场景：

项目场景：公司最近有个项目需要实现一个资源树（节点选中—加载图层，取消—隐藏图层）的功能。
在这里插入图片描述

问题描述

资源树我们可以用elementui的el-tree来实现功能，子节点可以选中\取消选中，这里我们可以使用插槽来自定义子节点：

  通过切换checked值为true或者false来实现，一个checkbox的状态切换

这里是实现资源树及自定义子节点的方法：
通过循环LayerData数据源，给数据添加checked属性，并绑定到v-model上，代码如下

       <el-tree
            :data="LayerData"
             :expand-on-click-node="false"
              node-key="id"
              :default-expanded-keys="expandedKey"
              ref="tree"
              :filter-node-method="filterNode"
              :props="defaultProps"
              >
          <div slot-scope="{ node, data }"  class="selfSettingnode">
              <el-checkbox
                 v-model="data.checked"
                 @change="onLayerShow(data)"
                  >
               </el-checkbox>
            <span :title="node.label" v-html="handleMark(node.label)" @click="labelClick(data)"></span>
          </div>
      </el-tree>

因为初始数据源没有checked属性值，所以在请求回来数据（树状结构）后，博主这里对数据源进行了一个递归遍历，并循环赋值给了checked:false的值，

    initLayerData(treeList) {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].pid === null) {
          treeList[i].nodeType = 'folder';
          treeList[i].checked=false;
        } else {
          treeList[i].nodeType = 'layer';
          treeList[i].checked=false;
        }
        this.initLayerData(treeList[i].children);
      }
    }
  }

做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！

原因分析：

这里我又定义了一个mock测试数据，直接给到checked：false

[{
        id: 1,
        label: '一级 1',
        checked:false,
        children: [{
          id: 4,
          label: '二级 1-1',
          checked:false,
          children: [{
            id: 9,
            label: '三级 1-1-1'
            checked:false,
          }, {
            id: 10,
            label: '三级 1-1-2',
            checked:false,
          }]
        }]
      }

用这个数据源来绑定后，可以正常选中、取消，说明双向绑定上了！
博主分析到这里大概知道什么原因了：
循环生成数据时候添加checked属性，并没有添加get set方法，使得vue监听不到checked值变化，进而不能更新view。这点，可以在浏览器vue调试中看到，点击时候数据的checked属性 true和false是在交替变化，但是view上没同步更新。

解决方案：

用 vue.$set方法来赋值，这样v-model绑定的数值可以监听checked的变化
这里将上面的方法改造一下，就完美解决我的问题了，代码如下：

    initLayerData(treeList) {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].pid === null) {
          treeList[i].nodeType = 'folder';
          this.$set(treeList[i], 'checked', false);
        } else {
          treeList[i].nodeType = 'layer';
          this.$set(treeList[i], 'checked', false);
        }
        this.initLayerData(treeList[i].children);
      }
    }