首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-tree：
<template>
<div>
<el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick" />
</div>
</template>
<script>
import { ElTree } from 'element-plus';
export default {
components: {
ElTree,
},
data() {
return {
treeData: [
{
label: '节点1',
children: [
{
label: '子节点1-1',
},
{
label: '子节点1-2',
},
],
},
{
label: '节点2',
children: [
{
label: '子节点2-1',
},
{
label: '子节点2-2',
},
],
},
],
treeProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
handleNodeClick(data) {
console.log('节点点击事件', data);
},
},
};
</script>
在这个例子中，我们使用了 el-tree 组件，并通过 :data 属性传递树形数据。treeProps 属性用于配置树节点的属性，比如 label 表示节点文本，children 表示子节点。
通过点击节点，可以触发 node-click 事件，我们在例子中定义了 handleNodeClick 方法来处理节点点击事件。你可以根据实际需求进一步自定义树形控件的样式和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5552/ElementPlus