这篇博客主要介绍树形控件的两个小小的功能:
下拉菜单
输入过滤框
以CSS样式为主,也会涉及到Vue组件和element组件的使用。
对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会用到树形组件了。
使用Vue + Element UI,构建出最基本的树如下图所示:
现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景。
下拉菜单
将下拉菜单嵌到树节点中,使操作更加简便、紧凑。
效果演示
效果如图:
图示1:悬浮在树节点状态
图示2:点击三个点图标状态
图示3: 选中并选择菜单
如上,当鼠标悬浮在树节点上时,出现竖着的三个小
1