element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题

今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, . 在Element UI库中，Tree组件是一个非常常用的控件，它用于构建层次结构的数据展示，比如在权限管理或者文件目录等场景。在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置为空数组时，树形控件的节点依然保持选中的状态，这与预期的行为不符。 `default-checked-keys`属性是Element UI Tree组件的一个配置项，它的主要作用是初始化时设置已勾选的节点的key值。当你传入一个数组，这个数组包含的key会对应地将树的节点设为选中状态。然而，这个属性并不支持双向绑定，这意味着当你试图通过改变`default-checked-keys`的值来动态更新树的选中状态时，组件不会自动响应这些变化。 为了解决这个问题，开发者提到可以通过Tree组件提供的`setCurrentKey`方法来实现双向绑定的效果。这个方法允许你在运行时动态地设置当前选中的节点key，从而改变树的选中状态。如果你希望在数据更新时自动同步到Tree组件，你需要在你的业务逻辑中调用`setCurrentKey`，并将新的选中key值传递给它。 然而，对于开发者来说，使用`setCurrentKey`可能不如直接通过数据绑定那样便捷。因此，他们选择了修改Element UI Tree组件的源码来实现这一功能。在源码中，他们增加了一个新的属性`pCheckedKeys`，并且在`watch`对象中监听这个属性的变化。当`pCheckedKeys`的值发生改变时，通过`this.store.setCheckedKeys()`来更新树的选中状态，这样就实现了类似双向绑定的效果。 下面是可能的修改后的代码示例： ```javascript props: { // ...其他属性 pCheckedKeys: Array, }, watch: { pCheckedKeys: function(newVal) { this.store.setCheckedKeys(newVal, false); }, }, ``` 在上述代码中，`pCheckedKeys`是自定义的属性，用于接收并反映数据模型中的选中key值。当`pCheckedKeys`发生变化时，`setCheckedKeys`方法被调用，将新的key数组传递给它，从而更新Tree组件的状态。 需要注意的是，直接修改第三方库的源码不是一个推荐的做法，因为它可能会导致升级困难，且不利于代码的维护。更好的解决方案可能是封装一个自定义组件，继承自Element UI的Tree组件，并添加必要的逻辑来实现所需的功能。这样既能保持代码的整洁，也能避免与库的后续更新产生冲突。 解决这个问题的关键在于理解`default-checked-keys`的用途和限制，并合理利用Tree组件提供的API，如`setCheckedKeys`，以及Vue的`watch`机制，来达到期望的双向数据绑定效果。