Vue实现树形视图数据步骤详解

PHP中文网 • 2025年3月8日 09:54:37 • 编程技术 • 阅读 2

这次给大家带来Vue实现树形视图数据步骤详解，Vue实现树形视图数据的注意事项有哪些，下面就是实战案例，一起来看一下。

这是模拟的树形图数据

let all={   name:'all',   children:{    A:{     name:'A',     children:{      a1:{       name:'a1',       children:{        a11:{          name:'a11',         children:null        },        a12:{          name:'a12',         children:null        }       }      },      a2:{       name:'a2',       children:{        b21:{          name:'b21',         children:null        }       }      }     }    },    B:{     name:'B',     children:{      b1:{       name:'b1',       children:{        b11:{          name:'b11',         children:null        },        b12:{          name:'b12',         children:null        }       }      },      b2:{       name:'b2',       children:{        b21:{          name:'b21',         children:null        }       }      }     }    }   }  }

登录后复制

代码如下

treelist.vue

   
       {{treelist.name}}        
  
 
   export default {  name:'tree',  props:['treelist'],  data(){   return{    open:false   }  },computed:{   isFolder:function(){    return this.treelist.children    }   }  ,methods:{   isshow(){    if (this.isFolder) {     this.open =!this.open    }   }  } }

登录后复制

index.html

树形图

登录后复制

index.js

import Vue from 'vue'; import tree from '../components/treelist.vue' let all={   name:'all',   children:{    A:{     name:'A',     children:{      a1:{       name:'a1',       children:{        a11:{          name:'a11',         children:null        },        a12:{          name:'a12',         children:null        }       }      },      a2:{       name:'a2',       children:{        b21:{          name:'b21',         children:null        }       }      }     }    },    B:{     name:'B',     children:{      b1:{       name:'b1',       children:{        b11:{          name:'b11',         children:null        },        b12:{          name:'b12',         children:null        }       }      },      b2:{       name:'b2',       children:{        b21:{          name:'b21',         children:null        }       }      }     }    }   }  } const app=new Vue({  el:"#app",  components:{   'tree':tree  },  data:{   treeList:all  } })

登录后复制

在经过踩坑之后，我发现Vue官网有类似的案例，链接→ 传送门

参考过官网的方法后，我尝试着实现了一下

这样写和我踩坑时的思路不同点在于，这样一个组件只负责一个对象,遍历每个children 中的对象，逐个传入组件处理，而我第一次尝试则是将整个children 传入自身是一个组件处理多个对象，（第一次尝试的失败案例，有兴趣请看最下方）

这样一个组件处理一个对象写的好处是什么呢

我可以在组件内自定义开关了

我在data里定义了变量open,因为组件递归，所以相当于每个组件都有个属于自己的open