根据条件控制el-tree节点显示隐藏

原创 已于 2023-11-23 19:50:56 修改 · 4.9k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html

于 2023-04-25 19:55:13 首次发布
实现el-tree组件根据后台提供的全量数据，前端通过filterNode方法动态控制树形结构中包含特定关键词如VS的节点显示，其他节点隐藏。

需求：

后台返回el-tree全量数据，前端根据条件控制每个节点显示隐藏

实现：

获取后台数据后，调用this.$refs.componentTree.filter(“VS”);触发filterNode 方法，按照条件控制显示

效果：（条件：只显示name中包含 "VS"的节点，）

在这里插入图片描述

代码：

<template>
  <div style="padding: 20px">
    <el-tree
      ref="componentTree"
      style="height: 100%"
      class="hx-scroll"
      :data="componentTreeData"
      highlight-current
      show-checkbox
      node-key="id"
      :expand-on-click-node="false"
      default-expand-all
      :filter-node-method="filterNode"
      :props="{ label: 'name', children: 'children' }"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
   
   
  name: "test",
  data() {
   
   
    return {
   
   
      componentTreeData: [
        {
   
   
          children: [
            {
   
   
              budgetVersionId: 1842182452449281,
              children: [
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011922,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "柱、暗柱VS柱",
                  new: false,
                  orderNo: 2,
                  parentId: 1849351790963362,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "柱,暗柱",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963361,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "柱帽VS柱帽",
                  new: false,
                  orderNo: 3,
                  parentId: 1849351790963362,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "柱帽",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011921,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "构造柱",
                  new: false,
                  orderNo: 4,
                  parentId: 1849351790963362,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "构造柱",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
              ],
              count: 0,
              createTime: 1682301810000,
              createdHostIp: "10.1.46.78,10.42.0.0",
              creator: "system",
              creatorId: -1,
              id: 1849351790963362,
              lastOperator: "韦民扬",
              lastOperatorId: 1658858666192897,
              name: "柱",
              new: false,
              orderNo: 1,
              projectId: 1774308439969793,
              reportType: 1,
              status: 1,
              type: 1,
              updateHostIp: "10.1.46.78,10.42.0.0",
              updateTime: 1682301810000,
            },
            {
   
   
              budgetVersionId: 1842182452449281,
              children: [
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011920,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "混凝土墙VS剪力墙",
                  new: false,
                  orderNo: 6,
                  parentId: 1849351790963360,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "剪力墙",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963391,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "砌体墙VS砌体墙",
                  new: false,
                  orderNo: 7,
                  parentId: 1849351790963360,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "砌体墙",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
              ],
              count: 0,
              createTime: 1682301810000,
              createdHostIp: "10.1.46.78,10.42.0.0",
              creator: "system",
              creatorId: -1,
              id: 1849351790963360,
              lastOperator: "韦民扬",
              lastOperatorId: 1658858666192897,
              name: "墙",
              new: false,
              orderNo: 5,
              projectId: 1774308439969793,
              reportType: 1,
              status: 1,
              type: 1,
              updateHostIp: "10.1.46.78,10.42.0.0",
              updateTime: 1682301810000,
            },
            {
   
   
              budgetVersionId: 1842182452449281,
              children: [
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963390,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "门VS门",
                  new: false,
                  orderNo: 9,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "门",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011918,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "窗VS窗",
                  new: false,
                  orderNo: 10,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "窗",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963389,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "门联窗",
                  new: false,
                  orderNo: 11,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "门联窗",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011917,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "飘窗",
                  new: false,
                  orderNo: 12,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "飘窗",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963388,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "墙洞VS墙洞",
                  new: false,
                  orderNo: 13,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "墙洞",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011916,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "板洞",
                  new: false,
                  orderNo: 14,
                  parentId: 1849351792011919,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "板洞",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
              ],
              count: 0,
              createTime: 1682301810000,
              createdHostIp: "10.1.46.78,10.42.0.0",
              creator: "system",
              creatorId: -1,
              id: 1849351792011919,
              lastOperator: "韦民扬",
              lastOperatorId: 1658858666192897,
              name: "门窗洞",
              new: false,
              orderNo: 8,
              projectId: 1774308439969793,
              reportType: 1,
              status: 1,
              type: 1,
              updateHostIp: "10.1.46.78,10.42.0.0",
              updateTime: 1682301810000,
            },
            {
   
   
              budgetVersionId: 1842182452449281,
              children: [
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011915,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "梁、环梁VS梁",
                  new: false,
                  orderNo: 16,
                  parentId: 1849351790963387,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "梁",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963386,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "连梁",
                  new: false,
                  orderNo: 17,
                  parentId: 1849351790963387,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "连梁",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351792011914,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "圈梁",
                  new: false,
                  orderNo: 18,
                  parentId: 1849351790963387,
                  projectId: 1774308439969793,
                  reportType: 1,
                  status: 1,
                  thirdCommpent: "圈梁",
                  type: 2,
                  updateHostIp: "10.1.46.78,10.42.0.0",
                  updateTime: 1682301810000,
                },
                {
   
   
                  budgetVersionId: 1842182452449281,
                  count: 0,
                  createTime: 1682301810000,
                  createdHostIp: "10.1.46.78,10.42.0.0",
                  creator: "system",
                  creatorId: -1,
                  id: 1849351790963385,
                  lastOperator: "韦民扬",
                  lastOperatorId: 1658858666192897,
                  name: "过梁",
                  new: false,
                  orderNo: 19,
                  parentId: 1849351790963387,
                  projectId: 1774308439969793,
最低0.47元/天 解锁文章
Debug-005-实现elementui的el-tree组件的一级节点的复选框不显示
LM0916的博客
05-09 1735
这里一共有两个问题：（1）如何生效（2）项目中还有别的组件和页面使用el-tree,这样修改之后，肯定会影响其他地方的使用，怎么处理？这里是通过改样式的方法，在网上参考别的大佬的代码，但其实我还没有深刻理解这段代码的含义，这里肯定要留意一下，再出一期。补充一下这一段知识点的空白，请各位大佬见谅。这里应该涉及到Vue中的深度选择器的相关知识（下面的代码是el-tree的基本结构和一些属性方法（请看备注，这里不再赘述，也可以去。这里我本来的思路其实是参考网上给出的另一种方式，即改源码的方式。
Vue（26）el-tree树形控件实现鼠标hover显示与隐藏
weixin_43880991的博客
12-08 5176
实现效果与原理 我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show来控制是否展示你需要的控件 具体代码 <el-tree :data="data" ref="tree" default-expand-all node-key="id" :...
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
最新发布
虎康的博客
10-10 421
摘要 本文实现了一个树形控件自定义需求：隐藏父节点复选框，仅允许选择子节点。通过分析数据结构，发现需要取消父子节点的关联关系。主要技术方案包括：1) 使用renderContent方法动态控制节点显示状态；2) 通过CSS隐藏部门节点的复选框；3) 根据业务规则(如ID>27)禁用特定节点。实现时需要注意：初始数据必须包含disabled字段，树的第一层节点通过DOM操作隐藏复选框，部门节点通过添加dept-node类名隐藏。最终效果实现了：一级节点隐藏复选框，部门节点不显示复选框，符合特定条件的节点
el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
IT_dabai的博客
04-25 1997
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）
el-tree 根据节点属性控制节点显隐
FellAsleep的博客
09-21 4309
用render-content方法实现树节点的内容区的渲染，根据节点属性判断是否渲染内容区，若不显示，则删除该节点。根据canEdit 控制节点隐藏/显示。只有总公司canEdit 为true。
ElementUI中el-tree节点的操作的实现
10-15
在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 首先，让我们来看一下`el-tree`的基本配置。在HTML部分，`el-tree`组件接收`data`属性，这是树...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
总结，要确保Element-ui的`el-tree`组件在新增或删除节点后正确刷新，关键是正确地修改数据源，并根据情况更新受影响的节点状态。同时，确保使用的是支持这一功能的最新Element-ui版本。在实际开发中，遇到问题时，...
Debug-008-el-tree-叶子节点图标的显示
LM0916的博客
05-16 957
最近做了好几个有el-tree的页面，坑是真的多。不过对其中的方法和属性更熟悉了。光一个el-tree我写是篇博文估计都不够，方法属性贼多。今天实现了一个小功能，分享一下。主要是利用了CSS的显示隐藏，没什么讲的。至于el-tree的那些属性，我准备单独再来分享一次。本来以为要自己写的，结果人家已经封装好了，所以还是要对文档熟悉，el-tree叶子节点添加图标按钮。
el-tree 实现部分节点获取焦点时自定义显示或隐藏高亮效果
qq_28059167的博客
05-22 651
el-tree自定义节点隐藏或展示获取焦点效果
Element el-tree树组件 隐藏非子节点前的勾选框
qq_41910413的博客
06-12 1346
使用el-tree树组件时，有时会需要展示勾选框，但是只允许勾选叶子节点，这时可以使用样式来控制让非叶子节点前的勾选框隐藏掉。
element-ui树形控件隐藏某些指定的节点
热门推荐
forteenBrother的博客
04-19 1万+
UI今天给了一张图，需要树形控件通过自定义节点内容实现。需要显示父节点，不显示子节点，点击父节点拿到子节点的数据，显示在表格中。如下图，就长这样。 实现 定义节点 <template> <div id="operatePush" class="operate_push"> <el-tree :data="treeData" ...
elementui el-tree 节点过滤加载对应的子节点
klousYG的博客
12-16 2188
问题：目前element-ui tree 节点过滤加载对应子节点方法,官网例子，不会返回过滤节点 的子节点，而大多数实际业务的需求是需要搜索到其下所有的子节点，实现方法如下，修改filterNode方法即可 <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultP
element ui tree组件使用render函数自定义节点内容，隐藏或者显示(附带点击子节点双击事件)
早晚的博客
07-07 2616
<el-tree ref="tree" class="stafftree" :data="devicesTreeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick" :render-content="renderContent" :default-checked-keys="checkedKeys" :default-expanded-keys="defaultExpandedKeys"
tree 隐藏 复选框
m0_51282855的博客
12-08 720
对象中添加属性 checkable 为false 即可
el-tree 全选节点和反选全部节点，展开和隐藏全部节点，获取全部节点状态的方法
qq_52940025的博客
08-12 5239
el-tree 全选节点和反选全部节点，展开和隐藏全部节点，获取全部节点状态的方法
修改element-ui中tree的checkbox（隐藏指定节点checkbox）
Kimser
09-02 6831
在使用element-ui中tree的checkbox时，有时需要根据节点的属性来决定是否在节点前显示checkbox选择框，因此需要对element-ui的源码进行修改。 1、将node_modules文件夹中 element-ui 文件夹的 packages 中的 tree 文件夹复制出来。 2、修改 tree-node.vue文件，在<el-checkbox></el-checkbox>标签中修改 v-if 的内容 3、使用自定义的tree组件 im...
el-tree节点隐藏
02-22
嗯，用户问的是关于el-tree节点隐藏的问题。首先，我得回想一下Element UI中的el-tree组件，它常用于展示树形结构数据。用户可能在使用过程中遇到了需要隐藏某些节点的需求，比如根据条件动态隐藏，或者在特定情况下...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值