Vue-24-利用Vue3的element-plus库实现树形结构数据展示
文章目录
- 1 项目启动
-
- 1.1 创建和启动项目(vite+vue)
- 1.2 清理不需要的代码
- 1.3 下载必备的依赖(element-plus)
- 1.4 完整引入并注册(main.sj)
- 1.5 设置@别名(vite.config.js)
- 2 el-tree树形控件
-
- 2.1 TreeComponents.vue
-
- 2.1.1 模板部分
- 2.1.2 类型定义(Tree)
- 2.1.3 树形数据(data)
- 2.1.4 整体代码
- 2.2 App.vue
- 3 示例应用
-
- 3.1 树形数据(TreeComponent.vue)
- 3.2 效果如下
- 4 附录
-
- 4.1 路径枚举转换为嵌套JSON
- 4.2 参考附录
使用el-tree控件，通过构建嵌套json数据格式，实现树形数据结构展示。
1 项目启动
1.1 创建和启动项目(vite+vue)
创建vue3+vite的项目
CMD>npm create vite@latest vue3_vite_tree -- --template vue
CMD>cd vue3_vite_backend
CMD>npm install 安装依赖
CMD>npm run dev 启动项目
1.2 清理不需要的代码
进入src目录
(1)删除style.css文件
(2)删除main.js中对style.css的引用。
(3)删除components中的HelloWorld.vue组件。
(4)删除App.vue中对HelloWorld组件的引用，修改template标签中的内容为123，清空style中的