在 Vue 3 中使用 ElementUI 的 Tree 组件的 @check 事件与 Vue 2 类似。你可以通过监听 @check 事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用 @check 事件：
1.首先，确保你已经安装了 ElementUI 组件库。
2.在你的 Vue 组件中，使用 Tree 组件，并监听 @check 事件：
<template> <div> <el-tree :data="treeData" show-checkbox :node-key="node => node.id" <!-- 使用函数返回节点的 id --> @check="handleCheck" ></el-tree> <el-tree :data="scenic.data" show-checkbox node-key="id" :props="defaultProps" @check="clic" :default-checked-keys="[checkboxed]" ref="treeRef" :default-expanded-keys="[checkboxed]" /> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const treeData = ref([ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1' }, { id: 3, label: 'Node 1-2' }, ], }, { id: 4, label: 'Node 2', children: [ { id: 5, label: 'Node 2-1' }, { id: 6, label: 'Node 2-2' }, ], }, ]); const handleCheck = (checkedNodes, checkedKeys) => { console.log('Checked nodes:', checkedNodes); console.log('Checked keys:', checkedKeys); }; const checkboxed = ref([]); const treeRef = ref<InstanceType<typeof ElTree>>(); const url = ref([]); const defaultProps = { children: "url", label: "name" }; return { treeData, handleCheck, }; }, }; </script> <style> /* 在这里添加你的样式 */ </style>
在这个示例中，我们使用了 Vue 3 的 Composition API，通过 ref 来定义响应式数据。与 Vue 2 不同的是，Vue 3 使用 setup() 函数来设置组件的逻辑。在 setup() 函数中，我们定义了 treeData 和 handleCheck 方法。
与 Vue 2 相似，我们在 el-tree 组件中使用 show-checkbox 属性显示复选框，并通过 :node-key 属性来设置节点的唯一标识（这里使用了一个函数返回节点的 id）。然后，在 @check 事件中调用 handleCheck 方法来处理选中状态的变化。
请根据你的实际需求进行逻辑处理。这只是一个简单的示例，你可以根据实际情况来设计你的 Tree 组件和处理方法。
