在 Vue 3 中使用 ElementUI 的 Tree 组件的 @check
事件与 Vue 2 类似。你可以通过监听 @check
事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用 @check
事件:
- 首先,确保你已经安装了 ElementUI 组件库。
- 在你的 Vue 组件中,使用 Tree 组件,并监听
@check
事件:
vue
<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 组件和处理方法。