1. 安装Vue和Element UI
首先，确保你已经在项目中安装了Vue和Element UI。
如果还没有安装，可以通过以下命令安装：
bash
Copy code
npm install vue
npm install element-ui
2. 创建一个树的配置文件
创建一个配置文件来存储树形数据。假设这个配置文件为treeData.js，它包含一个树的结构：
js
Copy code
// src/assets/treeData.js
export const treeData = [
{
label: "一级目录1",
children: [
{
label: "二级目录1-1",
children: [
{ label: "三级目录1-1-1" },
{ label: "三级目录1-1-2" }
]
},
{
label: "二级目录1-2",
children: [
{ label: "三级目录1-2-1" }
]
}
]
},
{
label: "一级目录2",
children: [
{ label: "二级目录2-1" }
]
}
];
3. 在Vue组件中实现树形功能
接下来，在Vue组件中引入Element UI的el-tree组件，并使用treeData作为树的数据源。
vue
Copy code
<template>
<div id="app">
<el-tree
:data="treeData"
:props="treeProps"
accordion
default-expand-all
node-key="label"
>
</el-tree>
</div>
</template>
<script>
import { treeData } from './assets/treeData'; // 导入树形数据
export default {
name: 'App',
data() {
return {
treeData: treeData, // 从配置文件中读取树形数据
treeProps: {
children: 'children', // 指定子节点的字段名称
label: 'label' // 指定节点标签的字段名称
}
};
}
};
</script>
<style scoped>
#app {
padding: 20px;
}
</style>
4. 使用Element UI样式
如果你尚未在项目中引入Element UI的样式，可以在main.js中引入它：
js
Copy code
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
render: h => h(App)
}).$mount('#app');
5. 运行项目
在命令行中运行以下命令来启动Vue项目：
bash
Copy code
npm run serve