申請博客已經一年多了，但是就是養不成寫博客的習慣，因為在工作中遇到的問題總是懶於總結，也嫌麻煩。久而久之，之前遇到的技術難點就會忘記，怎么解決的、是怎樣的一個思路，全然需要很費勁的去想。人的大腦又不是機器，三個諸葛亮也賽不過一個爛筆頭，所以經過深刻的教訓，決定寫博客，記錄在開發過程中遇到的一些坑和解決方案，方便日后返回來查看，好了，廢話不多說了，直接說我遇到的問題吧！
公司需要在現有的平台基礎上開發一個FTP功能，就是前端需要一個樹形結構供用戶勾選，然后發送給后台，且該樹形結構是懶加載的，點擊一個節點同時向后台請求它的子樹。沒有猶豫，就選擇用element 的el-tree，因為該平台一直在用element,最初打算在每個樹節點加一個復選框，此屬性為show-checkbox，和加上一個lazy和load樹形實現懶加載。需求是展開到最后一級子節點時可以勾選文件，但此時有一個問題，展開父節點時也會同時勾選並且發送多次請求，無法正確的展開到最后一級，然后我想把父節點的樹全部禁用，然后當加載到最后一級時取消最后一級的禁用，可以勾選。然而沒想到的是項目用的element版本過低，根本不支持el-tree的禁用狀態，然后經過深扒el-tree的祖宗三代，終於找到了解決方案，方案是直接放棄show-checkbox復選框的屬性，加上一個監聽樹展開事件@node-expand，每當展開樹時，都用一個變量接收住當前組件實例。
同時在load方法時，判斷是否是最后的子節點，這個由后台傳過來的變量判斷，若是最后的子節點則給該子節點加上showCheckbox=true;
至此，el-tree的功能基本實現，默認樹節點沒有復選框，每當點擊加載判斷子樹若是最后一級則給該節點加上復選框，大體思路就是這樣。（是不是最后一級后台會同時發送給前端）
load方法如下：
loadNode(node, resolve) {
//置空需要接受的子組件數組
this.acceptVueComp=[];
if (node.level === 0) {
//顯示一級目錄
return resolve([{ currentdir: this.firstDir,previousdir:'',leaf:false}]);
}else if(node.level===1){
var secondArr=[];
this.secondDir.forEach((obj)=>{
secondArr.push({currentdir:obj.filename,previousdir:this.firstDir,leaf:!obj.isDir});
if(!obj.isDir){
//收集最后一級的文件
this.saveFalseArr.push(obj.filename);
}
});
setTimeout(()=>{
this.acceptVueComp.$children.forEach((VueComp)=>{
//若是最后一級文件則顯示復選框
if(VueComp.node.data.leaf){
VueComp.showCheckbox=true;
}
});
},0)
//顯示二級目錄
return resolve(secondArr);
}
var isTrue=false;
// //判斷是否是文件，若是文件則返回
this.saveFalseArr.forEach((val)=>{
if(val==node.data.currentdir){
isTrue=true;
resolve([]);
}
});
if(isTrue) return;
var dataObj={
// username: this.ftpForm.username, //不需前端傳遞用戶名
currentdir: node.data.previousdir,
nextdir: node.data.currentdir
}
this.$http.post(Vue.api.root + 'artifact/version/getftpdir',dataObj)
.then(function(resp) {
if(resp.data.data==null){
this.$notify({ title: resp.data.success ? '成功' : '失敗', message: resp.data.info, type: resp.data.level });
return;
}
//判斷請求回來的子文件是否為空，若為空則給出提示
if(resp.data.data.dirlist.length>0){
var nodeArr=[];
resp.data.data.dirlist.forEach((obj)=>{
nodeArr.push({currentdir:obj.filename,previousdir:resp.data.data.currentdir,leaf:!obj.isDir});
if(!obj.isDir){
//收集最后一級的文件
this.saveFalseArr.push(obj.filename);
}
});
resolve(nodeArr);
setTimeout(()=>{
this.acceptVueComp.$children.forEach((VueComp)=>{
//若是最后一級文件則顯示復選框
if(VueComp.node.data.leaf){
VueComp.showCheckbox=true;
}
});
},0)
}else{
//若是目錄則里面是空，則給出提示
resolve([]);
setTimeout(()=>{
this.acceptVueComp.node.data.currentdir=this.acceptVueComp.node.data.currentdir+' （此目錄為空！）'
},0)
}
});
}
第一次寫博客，有好多不足的地方，望大家見諒！我會多多加油的！