log-tree

562 阅读1分钟

页面左右布局, 左部固定,右部自适应

carbon.png

tree的css实现

截屏2021-09-08 下午5.18.54.png css-tree.png

组件的通信 carbon (1).png

  很实用的方法,特别是在嵌套组件中想触发某一类组件中得事件。在此例中,泳道上可以直接
控制本级节点的折叠合展开的。
  broadcast,之后在组件内部判断自己的级别。如果和broadcast携带的参数相同则折叠或
者展开

性能优化

1. 最开始只是做了滚动加载,一直滚动下页面内存可以将近900M
2. 节点的高度不定,初始化不同,展开和折叠也会不同
3. 之前的版本根节点和后续节点是个整体,我只会v-for出来虚拟滚动
4. 思考再三,发现不用考虑的这么复杂,按照最低高度计算也是可以的
5. 同时将根节点单独提出来,还可以解决根节点滚动出视口的问题

carbon (2).png

github仓库地址