关于antd vue Tree组件踩过的那些坑

一般用tree组件的时候，希望点击父节点的时候，子节点全选或者取消。然后向后台传输数据的时候将子节点和父节点的数据（一般是id）传输过去，回显刚好相反，从后台取到数据然后来渲染Tree组件。看官方文档子节点要部分选择，父节点就不能和子组件强关联，也就是选择父节点的时候不会去控制子节点，这当然不方便操作了，那怎么处理呢，直接看代码：

```

<a-tree

          v-if="showTree"

          checkable

          :checkedKeys="checkedKeys"

          :expanded-keys="expandedKeys"

          :tree-data="menuList"

          :replace-fields="replaceFields"

          @check="onCheck"

        />

```

然后直接给checkedKeys对象初始值：{checked:[], halfChecked:[]}。

oncheck 方法可以这样写：

```

onCheck(checkedKeys, info) {

      this.checkedKeys = {checked: checkedKeys, halfChecked: info.halfCheckedKeys}

    },

```

这样就可以达到Tree组件子节点部分受控，又可以方便获取选择的节点数据的目的。

顺便再提一句，上面的v-if(vue 书写方式)的作用：一般我们都是异步获取数据然后渲染Tree组件，这样会有一个问题，就是数据发生变化的时候Tree组件没有同步更新，这时候我们就可以通过v-if隐藏，显示Tree组件来达到更新的目的。首次在网上写文章，词不达意，大家凑合着看吧。