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

}else if (node.level === 3) {

}else if (node.level === 4) {

}else if (node.level === 5) {

}

}

懒加载部分：

loadNode(node, resolve) {

if (node.level === 0) { //level是树的层级

return resolve([{ name: '列表' }]); //初始树节点

}

if (node.level === 1) { //层级为1的数据，层级2 3 4 5类同

this.$axios.get('http:// ?', {

params: {

pageNo: 1

}

})

.then(function (response) {

//拼装数据，[object]

let params=[]

for(let i=0;i

let param={leaf:false,name:'',ldId:''}

param.leaf=false;

param.name=response.data.data[i].ldName;

param.ldId=response.data.data[i].id; //存储楼的id

params.push(param);

}

return resolve(params);

})

.catch(function (error) {

console.log(error);

});

}

}

2.router

在Demo里，已经有两层路由的嵌套，而我们现在要利用树导航，则需要第三层路由嵌套，需要弄清以下问题：

① 上一层路由是什么，也就是第二层路由是什么，设置好router配置文件的Children

② 相应的也要嵌套，第一层在App.vue，第二层在外部导航菜单Home.vue里，第三层必须在显示树节点的文件里，因为要求同一页面上内容，左侧导航右侧显示，所以第三层路由显示内容的位置是在Home.vue的router-view显示内容里的router-view

其他，例如考虑到兼容问题，用 mode:'hash' ，设置参数用以传递id和层级传递信息(注意：非层际)

存在的问题：当我们已显示第三层内容时，单击左侧导航菜单(第二层)，会无法切换，必须先点击树的任意节点，再点击导航菜单才可正常切换。 3.关于table的格式化显示

例如，我想当变量flag为1时，显示在家，为0时，显示离家。则需要用到格式化显示，具体实现如下：

formatter1(row, column) {

if(row.flag==='1'){ //身份

return '房主'

}else{

return '房客'

}

}