前端树形数据选中节点返回该节点所有父级信息（id，name）,TreeNode,el-cascader,Breadcrumb面包屑信息显示

最新推荐文章于 2023-10-07 11:09:06 发布

Eirice

最新推荐文章于 2023-10-07 11:09:06 发布

阅读量967

点赞数 1

分类专栏： js Vuex react

本文链接：https://blog.csdn.net/qq_40696108/article/details/107866444

版权

本文介绍了如何在前端处理树形数据，特别是当产品需求包括获取选中节点及其所有父级的(id, name)信息时，以及如何利用TreeNode和el-cascader组件实现Breadcrumb面包屑信息的显示。通过递归方法，可以轻松实现级联信息的反填，满足灵活的数据需求。" 129297236,14821595,Java使用POI库生成Excel,"['Java开发', 'Excel处理', 'POI库']

摘要由CSDN通过智能技术生成

在这里插入图片描述
前端同学每次看到树形数据，无论是表格还是各种奇葩的Tree第一反应都是

产品此时就像一个讨债的地主见面就是我要这个

来来满足他

 renderTree = jsonTree => jsonTree.map( value => {
   
      //遍历树状数组，如果发现他有children则先套上<TreeNode>,再对他children中的元素做相同的操纵，直到children为空的元素停止，说明他们已经是最深的那一层了。
      if(value.children){
   
        return(
          <TreeNode title={
   
            <div  className="main-title-les" key={
   value.id}>
              {
   /*<span><img  src={xxx/value.img}/></span>*/}
              <span className="main-span-cel">{
   value.type?value.type:''}</span>
              <span className="main-span-sel">{
   value.sce?value.sce:''}</span>