项目场景：
项目场景：公司最近有个项目需要实现一个资源树（节点选中—加载图层，取消—隐藏图层）的功能。
问题描述
资源树我们可以用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);
}
}
总结：
由此可总结出，所有需要双向绑定且循环生成的控件，可能都有同类问题，都需要用vue.$set的方法来赋值，特此记录一下，解决一个elementui的小坑。