fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 #2861
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
chaishi
approved these changes
Oct 20, 2023
|
确认，已线下沟通过多次 |
Merged
16 tasks
uyarn
pushed a commit
that referenced
this pull request
Oct 23, 2023
* fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应变更事件，并触发对应 props 的变更 * fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 * test(tree): 完善单元测试，验证 onChange 事件中组件状态得到更新
uyarn
added a commit
that referenced
this pull request
Oct 23, 2023
* feat(anchor): child level (#2816) * feat(anchor): spatial distance calculation adjustments in front of anchor points * refactor(anchor): update common hash * fix(dialog): 修复 Dialog 弹框中打开表格，表格中分页组件信息出现超出省略问题 (#2821) * fix(input): dialog中pagination中input显示不全 * fix(hooks): useResizeObserver * fix(image-viewer): occasionally experiences jittering when closing (#2823) * fix(date-picker): confirm event does not work (#2833) * fix(cascader): effect source abnormal (#2837) * refactor(tree): tree 组件 vue2,vue3 统一业务代码 (#2820) * docs(tree): 添加分支维护备忘 * docs(tree): 完善分支维护说明 * refactor(tree): 改进代码与 vue3 api 的适配能力 * refactor(tree): 修正 treeItem 组件与 vue3 代码适配的问题 * refactor(tree): tree 类型文件更名为 tree-types.ts * refactor(tree): tree 组件使用 useVModel 改进受控逻辑 * fix(tree): tree 组件，修正受控形态下，赋值结果为空时依然更新了选中状态的问题 * test(tree): tree 组件添加测试: actived 受控处理可赋值空值 * test(tree): tree 组件还原 state 示例 * refactor(tree): tree 组件适配 useVModel 方法，完善 vue3 适配方式 * refactor(tree): tree 组件，改进类型的 vue3 适配 * refactor(tree): tree 组件解决 vue3 类型警告问题 * refactor(tree): 解决 vue3 类型告警问题 * refactor(tree): 解决组件引用方式在 vue3 告警的问题 * refactor(tree): 对照 vue3 代码，改进 useVModel 的使用方式 * test(tree): 解决示例在控制台告警的问题 * refactor(tree): 解决 vue3 h 方法差异问题 * refactor(tree): tree 组件，修正 vue3 下 slots 获取方式差异 * refactor(tree): 示例消除 vue2, vue3 差异 * refactor(tree): 解决与 vue3 受控代码保持一致的问题 * refactor(tree): tree 组件统一受控示例 * refactor(tree): 解决 tree 组件 数据变更示例适配 vue3 环境需要调整逻辑的问题 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件，示例代码与 vue3 统一 * refactor(tree): 改进代码结构，使用共享对象传递公共数据 * refactor(tree): tree 组件改进代码结构 * refactor(tree): 解决 vue3 未能触发 item render 的问题 * refactor(tree): 改进组件结构 * refactor(tree): 解决 vue3 props.disableCheck 未能正常工作的问题 * refactor(tree): 解决 empty 示例废弃 api 未生效的问题 * refactor(tree): 解决与 vue3 的示例差异 * refactor(tree): tree 组件完善节点操作示例 * refactor(tree): tree 组件完善属性变更逻辑 * refactor(tree): tree 组件，解决 setData 方法未能触发新增属性变更的问题 * refactor(tree): tree 组件，完善同步属性的示例 * refactor(tree): tree 组件虚拟滚动示例，降低节点数量便于调试 * refactor(tree): tree 组件，解决虚拟滚动数据变更的状态异常 * test(tree): tree 组件，屏蔽动画带来的测试概率性差异 * test(tree): tree 组件测试代码格式改进，适配 vue3 项目 * test(tree): tree 组件，测试代码与 vue3 版本统一 * refactor(tree): tree 组件虚拟滚动事件绑定适配 vue3 * test(tree): tree 组件统一vue2/vue3测试代码形式 * test(tree): tree 组件测试用例适配 vue-next 项目 * test(tree): tree 组件，vue2,vue3 统一测试用例 * test(tree): tree 组件，vue2,vue3 统一测试用例 * fix(tree): tree 组件虚拟滚动解决滚动条样式异常问题 * refactor(tree): tree 组件文件名称按规范重命名 * refactor(tree): tree 组件完善 expand-all 示例 * refactor(tree): tree 组件示例样式改进 * refactor(tree): tree 组件改进示例 * refactor(tree): 完善组件示例 * refactor(tree): tree 组件完善示例，分拆不同形式虚拟滚动示例 * refactor(tree): tree 组件改进清空节点的性能 * refactor(tree): tree 组件，完善虚拟滚动示例。变更受控实现 * fix(tree): tree 组件修正受控表现 * fix(tree): tree 组件修正事件触发规则 * test(tree): tree 组件完善单元测试 * chore(tree): tree 组件修改，更新 src/_common * fix(tree): tree 组件, update api * test(tree): tree, update snapshot * refactor(tree-select): 修正类型告警问题 * chore(tree): update common * chore(tree): update example * test(tree): update snapshot * chore: update common * chore(tree): update common * chore: revert style dir delete --------- Co-authored-by: Uyarn <uyarnchen@gmail.com> * feat(Tag): support CheckTagGrup (#2824) * feat(tag): support check-tag-group * refactor: demo * chore: update snapshots * feat: update common * feat(tag-input): support scroll when exceed type is scroll (#2846) * feat(tag-input): support scroll in scroll type * chore: update snapshot * chore: update snapshot * chore: release 1.7.0 (#2847) * chore: release 1.7.0 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: fix changelog content excced plugin size (#2848) * feat(table): radio filter controller improvement (#2850) * fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应变更事件，并触发对应 props 的变更 (#2852) * fix(checkbox): checkbox.disabled does not work dynamicly (#2849) * fix(checkbox): checkbox.disabled does not work dynamicly * fix: lint error * test: update snapshots * chore: update common * chore: update snapshot --------- Co-authored-by: Uyarn <uyarnchen@gmail.com> * fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 (#2861) * fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应变更事件，并触发对应 props 的变更 * fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 * test(tree): 完善单元测试，验证 onChange 事件中组件状态得到更新 * chore: release 1.7.1 (#2864) * chore: release 1.7.1 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: release 1.7.1-naruto --------- Co-authored-by: 何鹏 <ontheroad1992@qq.com> Co-authored-by: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Co-authored-by: betavs <34408516+betavs@users.noreply.github.com> Co-authored-by: TabSpace <pillar0514@163.com> Co-authored-by: sheepluo <yaoyanhuoyi@qq.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？
🔗 相关 Issue
#2855
💡 需求背景和解决方案
受控逻辑实现后，由于 tree 组件使用了独立的 store 来存储状态，在 useVModel 方法 setValue 时，事件触发时提供的状态是尚未改变的 store 状态，考虑到 tree 组件数据复杂性，没有去复制整个 store 状态来作为 context.node 的导出。
最终解决方案是，考虑受控的主要实现目标，做了变通，先立即变更 store 状态，在 setValue 触发 onChange 之后，如果为点击事件，则立即还原 store 状态为 props.value 的原先状态。
如果 props.value 发生变更，则切换为变更后的状态。
如果使用 setItem 之类的方法设置状态，则不做 store 状态的还原。
由于 store 状态都是立即设置的，这样在 onChange 发生时，拿到的就是立即操作后的状态。
由于视图状态实际上是在一个 tick 之后变更，所以还原状态时，不会发生视图闪烁。
📝 更新日志
fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单