低版本element el-tree不支持複選框禁用功能的解決方法

      申請博客已經一年多了，可是就是養不成寫博客的習慣，由於在工做中遇到的問題老是懶於總結，也嫌麻煩。長此以往，以前遇到的技術難點就會忘記，怎麼解決的、是怎樣的一個思路，全然須要很費勁的去想。人的大腦又不是機器，三個諸葛亮也賽不過一個爛筆頭，因此通過深入的教訓，決定寫博客，記錄在開發過程當中遇到的一些坑和解決方案，方便往後返回來查看，好了，廢話很少說了，直接說我遇到的問題吧！

　　公司須要在現有的平臺基礎上開發一個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)
　　　　　　}
　　　});
}

 第一次寫博客，有好多不足的地方，望你們見諒！我會多多加油的！