首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 Tree 组件：
<template>
<div>
<h3>Element-React Tree 树形控件</h3>
<el-tree :data="treeData" :props="treeProps"></el-tree>
</div>
</template>
<script>
import { ElTree } from 'element-react';
export default {
components: {
ElTree,
},
data() {
return {
treeData: [
{
label: 'Node 1',
children: [
{ label: 'Node 1-1' },
{ label: 'Node 1-2' },
],
},
{
label: 'Node 2',
children: [
{ label: 'Node 2-1' },
{ label: 'Node 2-2' },
],
},
],
treeProps: {
children: 'children', // 子节点数据的属性名
label: 'label', // 节点显示的属性名
},
};
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElTree 组件，并在模板中使用它。通过设置 data 属性来传递树形数据，通过设置 props 属性来配置树形控件的属性，比如子节点数据的属性名和节点显示的属性名。
你可以根据 Element-React 的文档和组件属性来进一步自定义树形控件，比如设置节点的图标、自定义节点的内容等。
请参考 Element-React 的官方文档：[Element-React Tree](https://element-plus.org/#/en-US/component/tree) 以获取更多详细信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5618/Element-React