feat(tree-select): add watch-props prop (#5190)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -35,6 +35,7 @@
 - `n-dialog` adds `close` slot.
 - `n-equation` export the `EquationProps` type.
 - `n-popselect` adds `header` slot.
+- `n-tree-select` adds `watch-props` prop.
 
 ## 2.35.0
 

CHANGELOG.zh-CN.md

@@ -35,6 +35,7 @@
 - `n-dialog` 新增 `close` 插槽
 - `n-equation` 导出 `EquationProps` 类型
 - `n-popselect` 新增 `header` 插槽
+- `n-tree-select` 新增 `watch-props` 属性
 
 ## 2.35.0
 

src/tree-select/demos/enUS/index.demo-entry.md

@@ -62,6 +62,7 @@ debug.vue
 | to | `string \| HTMLElement \| false` | `body` | Container node of the menu. `false` will keep it not detached. |  |
 | value | `string \| number \| Array<string \| number> \| null>` | `undefined` | Selected key (or keys when multiple). |  |
 | virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. |  |
+| watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. |  |
 | on-blur | `(e: FocusEvent) => void` | `undefined` | Callback on blur. |  |
 | on-focus | `(e: FocusEvent) => void` | `undefined` | Callback on focus. |  |
 | on-load | `(node: TreeSelectOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. | 2.27.0 |

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -65,6 +65,7 @@ render-debug.vue
 | to | `string \| HTMLElement \| false` | `body` | 菜单的容器节点，`false` 会待在原地 |  |
 | value | `string \| number \| Array<string \| number> \| null>` | `undefined` | 选中的 key |  |
 | virtual-scroll | `boolean` | `true` | 是否开启虚拟滚动 |  |
+| watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 |  |
 | on-blur | `(e: FocusEvent) => void` | `undefined` | Blur 时的回调 |  |
 | on-focus | `(e: FocusEvent) => void` | `undefined` | Focus 时的回调 |  |
 | on-load | `(node: TreeSelectOption) => Promise<void>` | `undefined` | 异步加载数据的回调函数 | 2.27.0 |

src/tree-select/src/TreeSelect.tsx

@@ -154,6 +154,9 @@ export const treeSelectProps = {
   renderPrefix: Function as PropType<TreeSelectRenderPrefix>,
   renderSuffix: Function as PropType<TreeSelectRenderSuffix>,
   nodeProps: Function as PropType<TreeSelectNodeProps>,
+  watchProps: Array as PropType<
+  Array<'defaultCheckedKeys' | 'defaultSelectedKeys' | 'defaultExpandedKeys'>
+  >,
   onBlur: Function as PropType<(e: FocusEvent) => void>,
   onFocus: Function as PropType<(e: FocusEvent) => void>,
   onLoad: Function as PropType<OnLoad>,
@@ -948,6 +951,7 @@ export default defineComponent({
                                 renderSuffix={this.renderSuffix}
                                 renderSwitcherIcon={this.renderSwitcherIcon}
                                 nodeProps={this.nodeProps}
+                                watchProps={this.watchProps}
                                 virtualScroll={
                                   this.consistentMenuWidth && this.virtualScroll
                                 }