el-tree增加搜索框筛选及组件的应用

最新推荐文章于 2024-07-26 14:27:31 发布
最新推荐文章于 2024-07-26 14:27:31 发布
阅读量559 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59392296/article/details/127862242
版权
本文介绍了如何使用Element UI组件和Vue计算属性实现搜索框内容筛选，配合nextTick和setCheckedKeys方法，详细讲解了设置node-key的重要性，并分享了组件库多多看的使用技巧。适合前端开发者快速上手实践。
摘要由CSDN通过智能技术生成

实现的效果

搜索框输入筛选内容，以及使用element组件自带方法的示例。

template部分

script 

 使用计算属性，过滤data的内容

 使用nextTick，setCheckedKeys方法

 组件方法截图。使用组件库多多看组件库的使用方法跟文档（自己还是比较粗心的）

 细节点，必须设置node-key属性

 实现的方法比较简单。感谢观看

夜深人静学前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用el-tree实现搜索的联动功能
weixin_46156770的博客
01-24 1854
今天公司做项目碰见这样一个需求 点击搜索，出现搜索框，左中右出现联动效果一个选中，其他都选中，右侧出现选中的内容，搞了三天终于可以了 html <el-card> <div class="distribution"> <div class="people"> <div class="search"> <el-input placeho
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
vue3+ts实现一个下拉选择框组件，支持搜索和多级联动
温暖前端的博客
05-21 772
来定义组件可以触发的事件。或事件监听来与这个子组件进行交互。来管理数据和计算属性，以及。来监听数据变化并更新父组件。在这个组件中，我们使用了。
el-tree 关键字搜索
m0_56219678的博客
04-25 2036
el-tree 进行关键字搜索
el-tree搜索方法使用
梁小茹的博客
06-29 545
el-tree搜索方法
el-tree实现搜索的两种方式
Zwq8023520的博客
04-10 575
第二种方法使用filter进行过滤，简单便捷。仅用一行代码实现，非常便捷。需要实现对人员进行搜索，第一种方法使用了递归，显得十分臃肿。
el-tree搜索父节点，父子节点一起展示
敲代码无敌小奶龙的博客
04-22 486
el-tree搜索父节点，父子节点一起展示
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 ...4、后台给到的数据是：所有的资源（多维数组）和已分配的资源（一维数组，包含（半勾选）父级数据）
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree-selected-tree
11-15
总的来说，`el-tree-selected-tree`是Element UI中`el-tree`组件的一个增强应用，它展示了如何利用事件监听和数据绑定来实现特定的业务需求，如动态展示选中节点和在独立树上进行操作。在实际项目中，这样的功能增强...
el-tree选中高亮和搜索框对dom进行操作
最新发布
kurhar的博客
07-26 197
需要做到在上方的div增加搜索，这个需求非常简单，但是在下方选中高亮效果，node-click和check事件都需要做到选中高亮效果，也不难，难的是node-click事件往往获取的node节点和data不像check事件中可以获取到当前已经选中的节点id列表，所以两个事件需要做到一致，就需要手动进行判断。在node-click调用两者相同的函数时，需要接受第三个参数，index，根据index进行做判断就好。如果是这样的状态获取当前选中高亮，以及对搜索的联动比较方便 而我看的el-tree是。
【el-tree查询并高亮】vue使用el-tree组件，搜索展开并选中对应节点，高亮搜索的关键字，过滤后高亮关键字，两种方法
seeeeeeeeeee的博客
07-22 3671
2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。
element 有搜索框input筛选的树形菜单
qq_38985444的博客
06-02 1063
default-expand-all --默认展开全部 highlight-current --高亮 :filter-node-method="filterNode" --筛选input :expand-on-click-node="false" --点击图标才展开 node-key="id" -- getCheckedKeys必须绑定id <!-- 格式可写在标签内 --> :props="{ label: 'name', value:'
vue3.x搭配el-tree搜索问题（包含el-tree内置搜索、接口搜索以及把搜索到的值进行高亮）
w_p_wyd的博客
09-28 2070
在日常项目中，常常会遇到对el-tree进行关键字搜索的问题，我们先看一下el-tree提供的内置搜索：适用于我们已经把数据全部获取到的场景。 调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。 我们看一下接口搜索：因为el-tree懒加载不适用于接口搜索的场景，所以我的思想是可以在搜索时候把el-tree的懒加载去掉，给el-tree的data属性赋值即可。 <el-tree class="filte.
html5筛选组件,根据JSON自动构建的vue筛选框组件
weixin_33504929的博客
06-07 367
背景我所在的小组主要面向内部, 开发内部平台, 大多数页面都存在以下的结构: 筛选框 + 表格; 小组内vue UI框架选型为view-design, view-design的Table组件支持使用JSON自动构建出表格, 但是并没有提供筛选框组件; 尽管有提供Input, Select等组件, 但是每次都需要写重复的代码!因此, 若是有一款组件, 支持传入JSON配置, 再根据JSON自动构建出...
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
yasuo56的博客
05-11 4181
el-tree(element-plus)搜索树形菜单，并且带全选多选功能
el-tree搜索的使用
敲代码无敌小奶龙的博客
12-11 1012
el-tree搜索的使用
el-tree组件使用filter-node-method方法搜索过滤节点，不展示子节点的问题以及中英文过滤
cyj0919的博客
03-29 1125
这个方法有三个参数，value:输入的搜索词，data是当前数据，node是当前树形节点。toLowerCase()实现中英文过滤。
el-tree 多选框
07-27
el-tree 多选框是 Element UI（饿了么团队开发的一套基于 Vue.js 的组件库）中的一个组件。它是一个树形结构的选择器，可以展示层级关系的数据，并且支持多选功能。 使用 el-tree 多选框，你需要按照以下步骤进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值