项目背景：为一些有层级关系的数据管理做一套后台管理系统，例如一个小区，里面是有许多楼，楼里有许多层，每一层有许多不同的房······，现在就是要实现对这些数据进行增删改查操作。
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<response.data.data.length;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和层级传递信息（注意：非层际）
<template>
<div class="wrapper">
<v-head></v-head> <!--应注意到，这里的v-head是import进来并且注册可用的组件-->
<v-sidebar></v-sidebar>
<div class="content-box" :class="{'content-collapse':collapse}">
<!-- <v-tags></v-tags> --> <!-- 实现标签效果，这里由于业务逻辑不适用，所以不用 -->
<div class="content">
<transition name="move" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</div>
</div>
</template>存在的问题：当我们已显示第三层内容时，单击左侧导航菜单（第二层），会无法切换，必须先点击树的任意节点，再点击导航菜单才可正常切换。
3.关于table的格式化显示
例如，我想当变量flag为1时，显示在家，为0时，显示离家。则需要用到格式化显示，具体实现如下：
<el-table-column prop="flag" :formatter="formatter1"label="状态" sortable width="150"></el-table-column>formatter1(row, column) {
if(row.flag==='1'){ //身份
return '房主'
}else{
return '房客'
}
}本文学习自:https://www.cnblogs.com/ww01/p/9060212.html
原文地址：https://www.cnblogs.com/smart-girl/p/10633894.html