如何在 Element UI 的 el-tree 组件中防止点击 radio/checkbox 触发节点折叠？

解答思路

节点折叠的点击事件很可能绑定在原生 DOM 事件上，通过给 radio/checkbox 添加 @click.native.stop 阻止事件冒泡到父级节点，是最直接的处理方式；如果组件内部通过 $emit 触发折叠逻辑而非依赖原生事件冒泡，则需要针对原始事件本身来阻止冒泡。

示例代码（如有代码）

<el-checkbox @click.native.stop>...</el-checkbox>

详细说明

• 优先尝试 @click.native.stop：由于 radio/checkbox 大多是普通表单组件，事件是原生 DOM 事件，加上 .native 修饰符可以监听到组件根节点上的原生点击事件，再用 .stop 阻止其向上冒泡到触发折叠逻辑的父级节点。
• 组件内部通过 $emit 触发折叠：如果节点折叠逻辑不是监听 DOM 冒泡、而是组件内部对原生事件做处理后再 $emit 出来的，.native.stop 可能不生效，这时需要直接在原生事件回调里调用 event.stopPropagation() 阻止冒泡，而不是依赖 Vue 的事件修饰符。
• 兜底方案：包一层容器 div：如果上述方式都不方便处理，可以在 radio/checkbox 外面额外包一层 div，在这个 div 上绑定点击事件并调用 stopPropagation()，从而彻底切断事件向上传播到节点行的路径。

小结

优先尝试 @click.native.stop 阻止原生事件冒泡；如果节点折叠逻辑是组件内部通过 $emit 触发的，需要直接处理原生事件并调用 stopPropagation()；实在无法生效时，可以用额外包裹一层 div 并阻止冒泡作为兜底方案。