elementPlu el-tree组件获取节点选中复选框数据

Element Plus 的 `el-tree` 组件是一个基于 Element UI 的树形控件，它允许用户对树结构中的节点进行操作，包括选择。要获取节点选中复选框的数据，你可以通过监听 `@node-click` 或 `@check-change` 事件来跟踪用户的交互。

当你在 `el-tree` 上设置 `props.checkable` 属性并启用选择功能时，可以这样做：

<template>
  <el-tree
    :data="treeData"
    ref="treeRef"
    :check-strictly="true"  // 如果你想严格控制只能全选或全不选
    @node-click="handleNodeClick"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],  // 树状数据，每个节点可能包含 "checked" 属性
      selectedNodes: []  // 用于存储选中节点的信息
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.checked) {
        this.selectedNodes.push(node);  // 当点击选中，添加到数组
      } else {
        const index = this.selectedNodes.findIndex(item => item === node);
        if (index > -1) {
          this.selectedNodes.splice(index, 1);  // 点击取消选中则移除
        }
      }
    },
    
    handleCheckChange(node) {
      // 这里会触发当单个节点的选中状态发生变化
      console.log('节点', node, '的选中状态变化了');
      // 更新selectedNodes数据
      this.selectedNodes = this.treeData.filter(n => n.checked);
    }
  }
};
</script>

在这个例子中，`handleNodeClick` 和 `handleCheckChange` 方法分别处理节点点击和选中状态改变时的操作。`selectedNodes` 数组用来保存选中节点的数据，包括它们的属性如 `checked` 状态。