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

最新推荐文章于 2023-03-29 17:41:05 发布
最新推荐文章于 2023-03-29 17:41:05 发布
阅读量549 收藏
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 );
	}
波塞西呀
关注
获取element ui Tree组件 调用过滤方法后的数据
前端李小白的博客
04-07 3231
最近有个需求是需要获取过滤后的 Tree组件数据， 看了一下element的文档，发现没有这个api，然后看了一下tree组件的数据，也没找到过滤后的数据，最后发现，element是通过Nodetree控制一个visible的变量来控制节点显示不显示的，如图 得到这个参数也算不错了，接下来就只需要写个递归遍历出来就行 /** * @description: 获取过滤后的数据 */ getFilterData() { if (this.filterText)
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 2万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
elementui el-tree 节点过滤加载对应的子节点
klousYG的博客
12-16 2105
问题：目前element-ui tree 节点过滤加载对应子节点方法,官网例子，不会返回过滤节点 的子节点，而大多数实际业务的需求是需要搜索到其下所有的子节点，实现方法如下，修改filterNode方法即可 <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultP
vue使用antd selectTree设置带所有父级节点的回显
Thomas的博客
05-05 8635
<template> <div> <a-tree-select labelInValue style="width: 20%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please selec...
element ui Tree 筛选不区分大小写
weixin_44282046的博客
12-12 659
Tree 筛选不区分大小写
element tree 获取到父ID 并回显
小米粒的博客
07-30 1104
描述：el-tree 子菜单未选中的情况，也能获取父节点Id，回显时后台也将父节点的Id传回来，但是子节点全部选中，主要解决这两个问题。 1、获取父id ①getHalfCheckedKeys 使用这个方法用来获取父节点半选择状态ID值 this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) 2、回显时获取父节点，子节点不能全选 <el-tree @check-change="...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
基于Element-UI封装可搜索的懒加载Tree组件的实现 在前端开发中，尤其是在管理后台系统里，Tree组件广泛用于展示层级化数据。随着互联网数据量的日益增长，传统的Tree组件已无法满足大数据量场景下的性能要求。于是...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
补充知识：element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发现2.4.11的是管用的 所有更新element-ui版本 cnpm i eleme
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
代码最下面 各项的参数截图 代码如下 户籍所在地 prop=censusLand xss=removed> <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px ... va
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在element ui 框架中，对于table框架，有一个筛选功能，这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑，非常具有实用价值，需要的朋友可以参考下
element-ui el-tree 筛选显示子节点
Songywaa的博客
02-02 3267
模糊搜索，搜索父节点展开其所有子节点
【vue3】通过 elmentui 中的 el-tree树状栏实现数据筛选
weixin_50450473的博客
05-18 2790
初始进入页面展示所有数据 点击tree单选按钮 需求：通过点击节点查询当前的子节点和列表内容。 调用同一接口，通过传Id展示不同的内容，只展示二级，点击当前的节点，展示当前的列表内容，通过懒加载子节点的方式实现 实现思路： tree.vue页面 <template> <el-tree class="tree_item" :props="person.props" :load="loadNode" @node-click="clickNod...
elementu的tree过滤搜索_element-ui el-tree异步树及父子节点选中过滤
weixin_34044446的博客
02-15 1081
需求：要求复选框异步树，父子关联，得到选中的数组，并进行过滤。比如父节点A被选中，则其子节点自动被选中，需要过滤只留下父节点传给后台，数据结构较为清晰。异步树htmlref="asyncTree":data="dataAsync":load="loadNode"show-checkbox:props="defaultProps":node-key="nodeKey":parent-key="par...
element-UI tree树形控件搜索过滤节点，不展示子节点的问题：
weixin_44072916的博客
01-08 9682
element-UI tree树形控件搜索过滤节点，不展示子节点的问题： 正常需求：搜索小区名称，展示对应的子节点“楼栋” element官方案例： 当在搜索框输入时，会把子节点过滤 掩藏掉 <el-tree class="filter-tree" accordion :data="data" :filter-node-method="filterNode" :props="defaultProps" ref="tree" eload="buildingData" @node-click="buidi
element-ui 树形接口筛选框功能实现
yehaocheng520的博客
10-10 1636
element-ui 树型结构筛选框 下拉筛选功能在后台管理系统中是非常常见的。 有单纯的下拉筛选： 这种单纯的下拉筛选功能可以通过select嵌套option来实现。 举例如下： <el-select v-model="listQuery.param.status" clearable style="width: 140px; margin-right: 6px" class="filter-item" placeholder="请选择订单状态"> <el-opti
vue elementUI tree树形控件如何获取父节点ID
qq_58640495的博客
07-28 1048
vue elementUI tree树形控件如何获取父节点ID 获取方法如下 this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
递归根据父节点查询下面所有子节点
weixin_57442997的博客
03-29 773
递归获取某个父节点下面的所有子节点。
element-ui中tree中的获取某一节点下所有的子节点id
qq_43351249的博客
12-29 1782
传递该节点的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 &
el-tree vue-draggable 回显数据
最新发布
09-12
在Vue.js中，`el-tree` 和 `vue-draggable` 是两个常用的库，前者用于构建树形结构组件，后者则提供了拖放功能。如果你想在这些库结合使用的情况下回显数据，你需要做以下几个步骤： 1. **安装依赖**： 首先确保已安装 Vue、Element UI (包含 `el-tree`) 和 draggable-vue（如果需要拖拽功能）。 ```bash npm install element-ui draggable-vue ``` 2. **配置数据结构**： 数据应该是一个嵌套的对象数组，每个节点通常包含 `label`、`children`（子节点列表）、`draggable` 等属性。例如： ```javascript const initialData = [ { label: '根节点', children: [ { label: '子节点A', draggable: true }, { label: '子节点B', draggable: false } ] } ]; ``` 3. **设置回显数据到el-tree上**： 在Vue实例中，你可以通过`v-model`绑定数据到`el-tree`组件： ```html <el-tree :data="initialData" node-key="id" ref="tree"></el-tree> ``` 4. **启用可拖动功能**： 如果你打算允许部分节点拖动，可以在`draggable-vue`的选项里设置： ```javascript import draggable from "draggable-vue"; draggable({ el: '#tree', group: '__tree__', // 绑定到同一组，避免跨节点拖动 drag: function({ event }) { this.$refs.tree.handleDrag(event); } }); ``` 5. **处理回显后的更新**： 当数据从后端获取并需要显示在树中时，可以遍历数据并使用`append`方法动态添加到树中： ```javascript updateTree(data) { data.forEach(node => { if (node.children) { appendChildrenToTree(this.$refs.tree, node.children); } else { this.$refs.tree.appendNode(node); } }); } ``` 6. **相关问题--:** - 如何禁用特定节点的拖放？ - 如何处理拖放事件并在回显时保持原有顺序？ - 如何在el-tree中实现自定义的拖放策略？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值