vue element-ui tree,筛选出所有父节id回显

最新推荐文章于 2024-01-23 17:49:10 发布
最新推荐文章于 2024-01-23 17:49:10 发布
阅读量497 收藏
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_1307495/article/details/117113655
版权

遇到一个后台只返回一个数节点的id,需要回显选择树节点，搜索了很多方法，所以在这里记录一下使用方法，
筛选的树结构 data

 "data":[
        {
            "id":10,
            "pid":0,
            "level":1,
            "fullName":null,
            "cateName":"环评类",
            "sort":1,
            "pic":"",
            "isShow":1,
            "children":[
                {
                    "id":1001,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"安评技术",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[
                        {
                            "id":10001,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"一级消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10002,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"一级消防市政",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10003,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"电气工程师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10004,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"注册消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10005,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"评估师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10006,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"拍卖师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10007,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"二建注册消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10008,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"二建注册公司车",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10009,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"一级消防工程师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10010,
                            "pid":1001,
                            "level":3,
                            "fullName":null,
                            "cateName":"测试1",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        }
                    ]
                },
                {
                    "id":1002,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环评",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[
                        {
                            "id":10011,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"测试测",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10012,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"电气工程师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10013,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"测试测注册消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10014,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"评估师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10015,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"测试测拍卖师",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10016,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"注册消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10017,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"二建注册",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10018,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"注册消防",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        },
                        {
                            "id":10019,
                            "pid":1002,
                            "level":3,
                            "fullName":null,
                            "cateName":"二建注册",
                            "sort":1,
                            "pic":"",
                            "isShow":1,
                            "children":[

                            ]
                        }
                    ]
                },
                {
                    "id":1003,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环评工程师/技术员",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":1004,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环评报告编写",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":1005,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环评主管",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":1006,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环评咨询工程师/咨询员",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":1007,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"环境应急预案编制员",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":1008,
                    "pid":10,
                    "level":2,
                    "fullName":null,
                    "cateName":"清洁生产审核",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                }
            ]
        },
        {
            "id":20,
            "pid":0,
            "level":1,
            "fullName":null,
            "cateName":"经营管理",
            "sort":1,
            "pic":"",
            "isShow":1,
            "children":[
                {
                    "id":2001,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"总工程师/副总工程师",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2002,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"分公司/办事处总经理",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2003,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"CEO/总裁/总经理",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2004,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"COO/副总裁/副总经理",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2005,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"总监",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2006,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"项目总监/产品经理",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                },
                {
                    "id":2007,
                    "pid":20,
                    "level":2,
                    "fullName":null,
                    "cateName":"合伙人",
                    "sort":1,
                    "pic":"",
                    "isShow":1,
                    "children":[

                    ]
                }
            ]
        },
    ],

在methods中写上方法

// 获取分类id渲染分类
    getCidList(val, cateId) {
      let cid_list = [];
      val.forEach((item, index) => {
        if (item.id == cateId) {
          // let obj = {
          //   id: item.id,
          //   cateName: item.cateName,
          // };
          cid_list = [item.id];
          // cid_list = obj
          return false;
        } else {
          if (item.children) {
            // let obj = {
            //   id: item.id,
            //   cateName: item.cateName,
            // };
            let newCid_list = [item.id];
            let list = nodefun(item.children, cateId, newCid_list);
            if (list) {
              cid_list = list;
            }
          }
        }
      });
      // 递归函数
      function nodefun(newVal, newId, newCid_list) {
        let flag = false;
        newVal.forEach((j) => {
          // console.log(j)
          if (j.id == newId) {
            // let obj = {
            //   id: j.id,
            //   name: j.name,
            // };
            newCid_list.push(j.id);
            flag = true;
          } else {
            if (j.children) {
              let cid_list = JSON.parse(JSON.stringify(newCid_list));
              // let obj = {
              //   id: j.id,
              //   name: j.name,
              // };
              cid_list.push(j.id);
              let list = nodefun(j.children, newId, cid_list);
              if (list) {
                newCid_list = list;
                flag = true;
              }
            }
          }
        });
        if (flag) {
          return newCid_list;
        }
      }
      return cid_list;
    },
    // 调用方法
    onScreen () {
    	let cateId = 2005;
		let cateIdList = this.getCidList(this.data, cateId);
		console.log(cateIdList );
	}
波塞西呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element-ui离线包2.14.1
12-16
完整的element-ui离线包，版本2.14.1，直接可用；如不想使用积分下载，可用链接中的方式自行下载：https://blog.csdn.net/ttphoon/article/details/104653785
vue-tree:基于vue element-ui的tree控件改装的可编辑，添加，删除带线性结构的tree组件
04-30
vue-tree A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 1.总体预览 2.编辑 3.新增 4.删除 5.提示
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
Welcome to ele-cli :waving_hand: element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ele ui 表单 一份表单有两个需要编辑的地方，一个是表单本身的属性，比如表单对象，表单的 Ref（用于表单验证），另一个就是表单包含的表单元素。 表单属性在表单属性编辑区可以编辑，表单元素的生成有两种方式 拖拽 将表单元素拖拽到拖拽区，然后编辑表单元素属性 支持 JSON 转化为表单 作为一个表单编辑工具，拖拽虽然简单，但是表单数量多的时候还是很麻烦。 因为我司接口通过 swagger 管理，其 post 接口列出了数据，如下图 你可以很方便的把数据粘贴至 JSON 表单对象的输入框，
vue-i18n结合Element-ui的配置方法
10-16
主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用递归解决数组转树形结构,勾选树形结构节点复选框,获取选中节点的所有id(不包含半选中的id)
多看书少吃饭的博客
10-25 1521
使用递归解决数组转树形结构,勾选树形结构节点复选框,获取选中节点的所有id
el-tree多选获取选中的节点ID
许粤军的博客
01-27 2244
需求：可以筛选并获取当前树结构中选中的用户ID 代码： <el-input v-model="filterText" placeholder="输入关键字进行过滤" /> <el-tree ref="tree" :data="userTree" show-checkbox node-key="id" :filter-node-method="filterNode" highlight-current :props="defaultProps" @.
VUE树形递归
weixin_43885779的博客
03-24 790
<script> //树形递归 TreeConcat(data){ // 删除 所有 children,以防止多次调用 data.forEach(function (item,index) { item.label = item.name delete item.children; }); // 将数据存储为 以 id 为 KEY 的 map 索引数据列 var map = {}; d
vue中使用Element-Ui的Tree 树形控件点击子级获取上级及以上的全部id ( 修改element-ui底层文件实现方法 )
一个超爱喝可乐的web前端攻城狮
03-26 3586
vue中使用Element-Ui的Tree 树形控件点击子级获取上级及以上的全部id ( 修改element-ui底层文件实现方法 ) Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的情况下才能获得父级的id，如果不选中所有的子级那么获取得到的id就只有子级的。但是一般提交数据时后台都需要父级id的。 解决方法 1,找到项目中的\node_modules\
element-ui中tree中的获取某一节点下所有的子节点id
qq_43351249的博客
12-29 1589
传递该节点的children数组 ids =this.getChildernId(node.children); 获取children数组中所有的id getChildernId(list) { let ids = [], childIds = []; list.forEach(item => { ids.push(item.id); if (item.children && item.children.length &
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要...
数组里有children，如何获取数组中所有对象某个key对应的值，组成新的值存在数组里面
qq_44552416的博客
03-01 1213
1，在实际开发中我们会遇到数组中包含chidren的数组，我们如果想要获取数组中某个指定的key对应值的组成新的key和value的时候，这时候我们改怎么简单方便的操作呢？
【VUE3】ElementUI--el-card卡片列表、el-tree 结合多选框获取子节点id导出数据
qq_48468636的博客
04-23 5578
在父级选中后我们不需要父级的id，只要求子级已选中的id，当子级全部勾选后父级也执行勾选，此时也要把父级id去掉。1.通过 npm、yarn、pnpm 安装。这次比较简单直接，贴上代码就可以了！首先要在项目文件安装具体可以查看。
vue使用antd selectTree设置带所有父级节点的回显
Thomas的博客
05-05 7889
<template> <div> <a-tree-select labelInValue style="width: 20%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please selec...
element-plus使用el-tree组件获取所有选中节点id以及实现实时过滤
m0_73146522的博客
01-04 2436
3.另外还有一个将扁平数据转化为树形数据的工具函数，使用这个组件的时候或许可以用上，这个是搬运别人的，不记得出处了，我参照自己数据结构稍微改了参数，menuId为每个节点的唯一id标识，parentId为父节点的id标识。标签中需要加上ref以及:filter-node-method两个重要属性。2.获取所有选中节点id，上方已经绑定了ref，直接用ref去获取即可。1.获取所有选中节点。
递归根据父节点查询下面所有子节点
weixin_57442997的博客
03-29 635
递归获取某个父节点下面的所有子节点。
遍历children_树的深度遍历应用：实现省市区级联（vue版）
weixin_36417344的博客
01-08 677
深度优先遍历口诀访问根节点对根节点的children挨个进行深度优先遍历效果图<template> <div> <div> <label>省</label> <select class="select-item" v-model="province"> <option ...
children json数据 递归_如何递归遍历树形json数据，获取所有的ID值
weixin_35679269的博客
12-31 1029
问题描述使用element-ui组件开发一个文件管理系统，其中用到了树形控件，后台返回的数据是树形结构数据，前端渲染时实现树形组件默认勾选，通过绑定node-key="id" ，:default-checked-keys来实现，数据中的ID要怎么一次性获取问题出现的环境背景及自己尝试过哪些方法自己写了用FOR循环实现，目前只有两级节点，写了两次循环，以后可能会有更多子节点，会显得代码过于冗长，有没...
vue中，多层级children，v-for怎么循环遍历？
最新发布
u010822903的博客
01-23 593
工作中遇到一个问题，就是需要在不知道基层children的情况下，一直循环有值得children，其中参考了一篇文章，和自己的修改，完成了这个功能。其中utils 就是我一直想要循环的展示children内容的组件。（右边展示，代码处理过后的效果）
搭建vue element-ui
04-25
的环境应该怎么做？ 好的，关于搭建 Vue Element-UI 的环境，你可以按照以下步骤进行： 1. 首先，你需要安装 Node.js，可以在官网下载对应版本进行安装。 2. 然后，安装 Vue CLI，可以使用以下命令进行安装：npm install -g @vue/cli 3. 创建一个新的 Vue 项目：vue create my-project 4. 进入到项目目录，安装 Element-UI：npm install element-ui --save 5. 在 main.js 文件中引入 Element-UI：import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 6. 在 main.js 文件中使用 Element-UI：Vue.use(ElementUI); 至此，就完成了 Vue Element-UI 的环境搭建。希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值