el-tree 介绍

element-ui 的树形控件，基本用法：

	<el-tree
		:data="data"
		 node-key="id"
		 :default-expanded-keys="all"
		 :default-checked-keys="checkedId"
		 :props="defaultProps"
		 show-checkbox>
	</el-tree>

default-checked-keys 表示默认勾选的节点的 key 的数组

问题

项目中的在为角色授权时，用el-tree展示了所有菜单。今天发现了一个问题，在勾选菜单中的部分项，点击提交之后，会出现所有节点都被选中的情景，虽然不影响提交的值，但是用户体验很差，有一种数据突然改变的感觉

百度了很久，最后感谢element-ui tree组件，default-checked-keys，会把节点下所有子节点全部勾选，怎么解决？，和文中的作者情况一模一样，参考了littleLyon的回答，最后解决了问题

原因

当使用包含父节点的数组设置组件的 default-checked-keys，父节点下的所有节点都会被选中。
例如：A 是 父节点， B C D 分别是 子节点，勾选了 B节点，checkedId仅包含B，没有问题，如果checkedId包含了A和B，A节点下的节点都被选中。
在项目中，由于要把勾选后的节点所在的父节点一并传给后台，因此会采用 this.$refs.menu.getHalfCheckedKeys()获取了半选的节点，push到了checkedId数组中，因此此时的checkedId是上述的第二种情况，包含了A和B，于是出现了父节点下的所有子节点都被选中的问题

解决方案

将default-checked-keys绑定的变量与向后台提交的变量分为两个变量，通过
this.$refs.menu.getHalfCheckedKeys().concat(this.$refs.menu.getCheckedKeys())获取选中的节点提交给后台，不能直接向checkedId添加父节点。