Vue-component | 极其简易Tree列表

日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维???。 代码传送门（?感觉有作用的的同学帮忙点下❤️️） 效果截图 这是一个简单的树形列表,可展开收起。 Tree.gif 组件结构 由多层列表嵌套组成。

• • ...

核心代码 Tree 最顶层结构 Item 递归调用自己的核心 传入的数据格式 treeData: { title: '地球', children: [ { title: '人' }, { title: '水果', children: [ { title: '橘子' }, { title: '苹果' } ] }, { title: '植物', children: [ { title: '四君子', expand: true, children: [ { title: '梅' }, { title: '兰' }, { title: '竹' } ] }, { title: '动物', children: [ { title: '猪?' }, { title: '狗' } ] }, { title: '气体', children: [ { title: '空气', children: [ { title: '氧气' }] }] } ] } ] } 关键点 在这里主要使用的一些技术包括： 技术 概述 备注 递归组件 自己调用自己，要记得注明name / v-for 在这里搭配递归，将数据一层一层遍历展示 / 后续会持续更新其他一些有用的组件提供参考...

本文章由javascript技术分享原创和收集