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

Question

因项目需要，只在某些特定树节点需要显示radio或checkbox选项，使用插槽进行自定义节点内容。简化代码如下：

  <el-tree :data="treeData">    <template #default="{ data }">      <el-radio @click.stop="handleChange(val, evt)" v-model="data.checked">{{ data.label }}</el-radio>      <el-checkbox @click.stop="handleChange(val, evt)" v-model="data.checked">{{ data.label }}</el-checkbox>    </template>  </el-tree>

问题：在点击radio或checkbox控件时会触发树节点的一次折叠。尝试在handleChange()内增加stopPropagation和preventDefault均不生效。求大佬们指点

Answer 1

试试 @click.native.stop 组件的方法有可能是 $emit 出来的，所以试试直接处理原始时间阻止冒泡。

还可以增加一个父级节点 div ，然后在 div 上阻止冒泡

Answer 2

要在 Element UI 的 el-tree 组件中防止点击 radio 或 checkbox 触发节点折叠，你可以通过阻止事件冒泡来防止 el-tree 的节点折叠行为。在你的代码中，你已经尝试使用了 @click.stop 修饰符来阻止点击事件冒泡，这通常是正确的做法。然而，由于 v-model 的双向绑定可能会触发额外的更新和事件，这可能会导致节点折叠。

一种可能的解决方案是，不在 el-radio 和 el-checkbox 上直接使用 v-model，而是手动处理选中状态的变化。同时，确保在改变选中状态时不触发 el-tree 的折叠逻辑。

下面是一个修改后的代码示例：

<template>  <el-tree :data="treeData" @node-click="handleNodeClick">    <template #default="{ node, data }">      <el-radio        v-if="/* 根据某些条件判断是否需要显示 radio */"        :label="data.id"        :checked="node.checked"        @change="handleRadioChange(node, $event)"      >        {{ data.label }}      </el-radio>      <el-checkbox        v-else-if="/* 根据某些条件判断是否需要显示 checkbox */"        :label="data.id"        :checked="node.checked"        @change="handleCheckboxChange(node, $event)"      >        {{ data.label }}      </el-checkbox>      <span v-else>        {{ data.label }}      </span>    </template>  </el-tree></template><script>export default {  data() {    return {      treeData: [/* 你的树数据 */],    };  },  methods: {    handleNodeClick(data) {      // 这里处理节点点击事件，如果需要的话    },    handleRadioChange(node, event) {      // 手动设置节点的选中状态，避免 v-model 触发额外的行为      node.checked = event.target.checked;      // 这里可以添加额外的逻辑，比如更新节点数据等    },    handleCheckboxChange(node, event) {      // 与 handleRadioChange 方法类似，处理 checkbox 的变化      node.checked = event.target.checked;      // 其他逻辑...    },  },};</script>

在这个修改后的代码中，我们移除了 v-model 并使用了 @change 事件监听器来手动处理 radio 和 checkbox 的选中状态变化。这样，当你点击 radio 或 checkbox 时，只有这些控件的选中状态会改变，而不会触发 el-tree 的节点折叠行为。

注意：这个解决方案假设 node 对象有一个 checked 属性，你可以用它来跟踪节点的选中状态。你需要确保在初始化 treeData 时，每个节点都有一个 checked 属性，并且这个属性在树的状态改变时得到正确的更新。此外，你可能还需要在合适的地方（比如组件的 created 或 mounted 钩子中）初始化 treeData 以确保 checked 属性被正确设置。