el-tree 复选框 勾选事件

el-tree 是 Element UI 提供的一个树形组件，它通常用于展示层级结构的数据，并包含选项如复选框功能。当你在树节点上启用勾选功能时，用户可以对每个节点进行选择或取消选择。当用户点击某个节点的复选框时，会触发 `check` 或 `uncheck` 事件。

`check` 事件是在节点被选中的时候触发，而 `uncheck` 则是在节点被取消选中时触发。这两个事件通常会有对应的回调函数，你可以在这个函数中处理用户的操作，比如更新数据状态、发送请求等。例如：

<el-tree
  :data="treeData"
  node-key="id"
  @check="handleCheck"
>
</el-tree>

methods: {
  handleCheck(node) {
    // 当节点被选中时执行的操作
    console.log('Node with id', node.id, 'is checked');
    
    // 如果需要取消选中，可以在 uncheck 函数里处理
    node.checked = false;
    this.$emit('uncheck', node);
  }
}

相关问题

在vue中，el-tree新增节点默认勾选复选框

在 vue 中使用 el-tree 组件新增节点并默认勾选复选框，可以使用以下方法：

1. 在 el-tree 组件的 data 属性中，为新增的节点添加 checked 属性，并设置为 true，例如：

data: [
  {
    id: 1,
    label: '节点 1',
    children: [
      {
        id: 2,
        label: '节点 2',
        checked: true
      }
    ]
  }
]

2. 使用 el-tree 组件的 node-key 属性，并在 data 属性中为新增的节点添加该属性的值，例如：

node-key: 'id',
data: [
  {
    id: 1,
    label: '节点 1',
    children: [
      {
        id: 2,
        label: '节点 2'
      }
    ]
  }
]

然后，在 el-tree 组件的 ref 属性中，使用 this.$refs.tree.setCheckedNodes([{ id: 2 }]) 方法将新增的节点设为勾选状态。

this.$refs.tree.setCheckedNodes([{ id: 2 }])

请注意，在使用 setCheckedNodes 方法时，需要保证 el-tree 组件已经渲染完毕，因此通常需要在 mounted 钩子函数中使用。

mounted () {
  this.$refs.tree.setCheckedNodes([{ id: 2 }])
}

el-tree多选框自定义方法

`el-tree` 是 Element UI 库中用于展示树形结构数据的一个组件，它支持多种配置项和事件处理机制。当涉及到多选框的自定义操作时，主要是指如何通过编写额外的功能代码来自定义选择行为、改变默认的选择状态等。

### 自定义 `el-tree` 的多选框方法：

#### 1. 初始化默认勾选项

你可以利用 `default-checked-keys` 属性设置初始状态下哪些节点应该被选中，并结合 `check-strictly` 来控制是否允许父子节点之间的关联检查（即父级选中时不自动选中所有子节点）。例如：

<template>
  <div>
    <el-tree :data="treeData" show-checkbox node-key="id"
             default-expand-all
             ref="tree">
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

const treeData = [
  // 树的数据...
];

onMounted(() => {
   const checkedKeys = ['leaf_2', 'branch_4'];
   (this.$refs.tree as any).setCheckedKeys(checkedKeys);
});
</script>

在这个例子中，在页面加载完成后会初始化并设定指定 ID 节点为已勾选的状态。

#### 2. 监听用户交互修改后的值

为了捕捉到用户的点击动作以及相应变化之后的新值，我们可以监听 `check-change` 这一事件来进行进一步的操作。此事件会在每个复选框发生变化的时候触发一次回调函数。

<!-- 组件内添加 check-change 监听 -->
<el-tree @check-change="handleCheckChange">

...

// 对应的方法体部分
methods: {
  handleCheckChange(data, checked, indeterminate) {
     console.log(`Node ${data.label} is now `, checked ? "selected" : "deselected");
      // 可以在这里加入更多的业务逻辑判断及处理
  }
}

这里展示了怎样获取当前改变了状态的那个元素信息及其最新情况；同时也可以根据实际需求做更多复杂的响应式设计。

#### 3. 手动控制某些特定条件下的勾选行为

如果需要对某个具体的分支或者叶子实施特殊的勾选规则，则可以在上述提到过的 `@check-change` 回调里面增加一些限制性的检测。比如只让符合条件的一批项目能够被打钩。

function customSelectRule(node){
  return !node.disabled && /* 其他限定条件 */;
}

handleCheckChange(data, checked, indeterminate){
  if(!customSelectRule(data)){
    this.$nextTick(()=>{
       let instance=this.$refs.tree;
       instance.setChecked(data.id,!checked); // 恢复原状
    });
    alert("该条目不允许单独选择！");
  }
}

上面的例子演示了基于一定条件下阻止非法单击造成的意外选取效果——先恢复再提醒的方式。

---

综上所述，我们可以通过以上几种方式来定制化 `el-tree` 中关于多选框的行为模式。如果你还有更复杂的需求或者是遇到了其他问题，欢迎继续提问！