vue数据层思路_vue层级关系的数据管理

项目背景：为一些有层级关系的数据管理做一套后台管理系统，例如一个小区，里面是有许多楼，楼里有许多层，每一层有许多不同的房······，现在就是要实现对这些数据进行增删改查操作。 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) {

this.$ro