项目背景:为一些有层级关系的数据管理做一套后台管理系统,例如一个小区,里面是有许多楼,楼里有许多层,每一层有许多不同的房······,现在就是要实现对这些数据进行增删改查操作。
1.Tree(树形组件)
Sublime Text 3左侧的项目目录,就是有一定层级关系的“数据”被组织成Tree,然后单击各子树,会呈现不一样的内容,因此可借用这个设计思想来设计这一套系统的导航功能。为什么要做这个导航功能,因为若要简单实现,直接用一个选择器组件,放入所有可选项让用户进行选择即可,然而这样做的友好度不够。
例如,一哥们想进入小区内的A楼,13层找到1304房,而选择器实现无非2种方式:
第一种,级联选择器,我利用E UI里的级联选择器组件,未找到很好的动态追加选项的方法。
第二种,选择器备选项进行分组显示,这样首先是导致备选项数量冗长;其次需要一次性加载所有的数据,通常很多数据是用不上的,因此浪费服务器资源。
我的方式是,利用 Tree树形组件进行懒加载,未利用的数据不加载,单击箭头图标进行加载,单击树节点名称进行内容导航。以下是部分代码展示:
handleNodeClick(obj,node,data) {
if (node.level === 1) {
this.$router.push('/ldTable');
}else if (node.level === 2) {