搜索框

属性

  :filter-node-method="filterNode"  对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏
           <el-input v-model="filterText"></el-input>
<el-tree ref="space"
id="modelTree"
:data="spaceTreeData"
:props="defaultProps"
show-checkbox
node-key="nodeId"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
:render-content="renderContent"
:filter-node-method="filterNode"
@node-click="handleNodeClick"></el-tree>

数据

 data() {
return {
//空间树数据
spaceTreeData: [],
//默认树结构的输出格式
defaultProps: {
children: 'children',
label: 'name'
},
filterText: '',
}
},

方法

//监听搜索框的查询参数变化,然后进行过滤
watch:{
filterText(val) {
this.$refs.space.filter(val)
}
}

filter触发过滤事件

methods:{ 
//优化之后的代码 不管有几级都可以适用,不过用了递归,量太大还是会崩溃,这个后续需要优化
filterNode(value, data, node) {
if (!value) {
return true
}
let level = node.level
let _array = [] //这里使用数组存储 只是为了存储值。
this.getReturnNode(node, _array, value)
let result = false
_array.forEach(item => {
result = result || item
})
return result
},
getReturnNode(node, _array, value) {
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -
isPass ? _array.push(isPass) : ''
this.index++
console.log(this.index)
if (!isPass && node.level != && node.parent) {
this.getReturnNode(node.parent, _array, value)
}
}
}

Element ui tree 搜索的更多相关文章

  1. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  2. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  3. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  4. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  5. element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题

    在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...

  6. element - ui tree

    一行代码两行泪,没有外网真可怕!好久没写博客了,更新一把. <template> <div> <el-tree :data="data" :props ...

  7. 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  8. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

随机推荐

  1. Spring Boot Metrics监控之Prometheus&Grafana(转)

    欢迎来到Spring Boot Actuator教程系列的第二部分.在第一部分中,你学习到了spring-boot-actuator模块做了什么,如何配置spring boot应用以及如何与各样的ac ...

  2. Ubuntu配置国内高速apt-get更新源

    Ubuntu配置国内高速apt-get更新源     具体内容直接参考这篇博客:https://www.linuxidc.com/Linux/2017-11/148627.htm 此网站可直接找到符合 ...

  3. Typora 精美而强大的Markdown编辑器

    Typora 精美而强大的Markdown编辑器  转 https://www.jianshu.com/p/45e284645d30 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有 ...

  4. [转]地理投影,常用坐标系详解、WGS84、WGS84 Web墨卡托、WGS84 UTM、北京54坐标系、西安80坐标系、CGCS2000坐标系

    转自:http://www.rivermap.cn/docs/show-1829.html 常用坐标系详解 (一)WGS84坐标系 WGS-84坐标系(World Geodetic System一19 ...

  5. android studio 运行按钮为灰色的解决办法之一

    sync project with gradle files按钮(如下图)同步一下就好了 3.2的  3.3同步按钮变成了一只大象+箭头

  6. 【转载】 准人工智能分享Deep Mind报告 ——AI“元强化学习”

    原文地址: https://www.sohu.com/a/231895305_200424 ------------------------------------------------------ ...

  7. Oracle中RAISE异常

    转: Oracle中RAISE异常 由三种方式抛出异常 1. 通过PL/SQL运行时引擎 2. 使用RAISE语句 3. 调用RAISE_APPLICATION_ERROR存储过程 当数据库或PL/S ...

  8. 【Tomcat】Tomcat 基本使用(二)

    上一章介绍了Tomcat原理[Tomcat]Tomcat 原理架构(一),本章介绍Tomcat的基本使用 Tomcat端口设置 tomcat端口设置,在tomcat的配置文件目录下的server.xm ...

  9. python flask框架学习(三)——豆瓣微信小程序案例(二)整理封装block,模板的继承

    我们所要实现的效果: 点击电影的更多,跳转到更多的电影页面:点击电视剧的更多,跳转到更多的电视剧页面. 三个页面的风格相同,可以设置一个模板,三个页面都继承这个模板 1.在指定模板之前,把css放在一 ...

  10. SQL语句 update 字段=字段+字符串 拼接

    update user_info set user_name = concat(user_name,'呵呵呵') where user_name = '哈哈哈';