項目背景：為一些有層級關系的數據管理做一套后台管理系統，例如一個小區，里面是有許多樓，樓里有許多層，每一層有許多不同的房······，現在就是要實現對這些數據進行增刪改查操作。
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
② 相應的
其他，例如考慮到兼容問題，用 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 '房客'
}
}