在我前面随笔《循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用》里面曾经介绍过一些常规的界面组件的处理，主要介绍到单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理，本篇随笔补充这一个主题，介绍树列表组件和下拉列表树组件在项目中的使用，以及一个SplitPanel的组件。

1、常规树列表控件的使用

众所周知，一般界面很多情况涉及到树列表的处理，如类型展示，如果是一层的，可以用下拉列表代替，如果是多个层级的，采用树控件展示会更加直观。

一、数据结构和渲染效果图

1.假设的数据结构如下：

2 页面效果如下

二、实现的方式

1、template去递归

首先编写子组件，loop-page.vue文件

如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！

项目介绍

在后端服务调用等待时，为防止前端误操作，一般会在前端实现一个等待弹窗，今天简单实现了一个，效果如下图：

作用嘛，一个是遮罩前端页面，二是提供信息提示，告知用户正在做什么操作，用了多长时间等等。

作者：前端有路灯

https://juejin.cn/post/7187285219257352250

智能化的发展，已经让我们迈入全民数据化时代，数据记录与分析成为各行各业必不可少的业务能力范围之一。通过互联网记录分析用户消费、行为习惯，帮助用户增长，业务提升，成为互联网企业首要解决的难题！

可视化大屏展示，完全可以满足这种需求。

大屏可视化解决方案：

不知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完所有响应式问题都会迎刃而解，一起学起来吧！

Vue.js源码全方位深入解析，快人一步进名企

来百度APP畅享高清图片

Vue 2的响应式原理：

前面介绍的，父子、爷孙组件通信方式，要想解决子子、孙孙间通信，两个无关联组件的通信还是太麻烦的。

mitt可适用于任意组件间的通信。

对于后端的开发同学来说，mitt可以类比Kafka，一个基于发布/订阅模式的消息队列。

安装mitt：