当前位置: 首页 > news >正文

element树形筛选

<el-inputv-model="projectName"placeholder="请输入名称"clearablemaxlength="10"@clear="clearTree"
/>
<el-divider />
<el-treeref="tree"class="filter-tree":data="treeList":props="defaultProps"default-expand-allnode-key="id":highlight-current="highlightCurrent":filter-node-method="filterNode"@node-click="handleNodeClick"
><div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label"><span>{{ node.label }}</span><div class="button-group" @click.stop="() => {}"><el-link size="mini" type="primary" icon="el-icon-circle-plus-outline" @click.stop="onAddType(data)" /><el-link size="mini" type="primary" icon="el-icon-delete" @click.stop="onDelType(data)" /></div></div>
</el-tree>
projectName: '',
treeList: [],
defaultProps: {children: 'children',label: 'name'
},watch: {projectName: {handler(v) {// 监听输入框变化、进行实时过滤this.$refs.tree.filter(v)}}},methods: {// 过滤掉无用的数据filterNode(value, data, node) {if (!value.trim()) return trueif (data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) { return true }return this.checkNodes(value, data, node)},// 筛选父级所需要的子级checkNodes(value, data, node) {const level = node.levelif (level === 1) return falselet parentData = node.parentlet index = 0while (index < level - 1) {if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) return trueparentData = parentData.parentindex++}return false},// 清空项目树搜索框clearTree() {this.getOrganizarionTree()},
}
http://www.lryc.cn/news/160830.html

相关文章:

  • 打字侠:一款专业的中文打字网站
  • C++ std::default_random_engine的使用
  • 软件设计模式(二):工厂、门面、调停者和装饰器模式
  • pdf文件签名的问题解决
  • Node.js安装使用
  • sql:SQL优化知识点记录(七)
  • 机器学习:基于梯度下降算法的线性拟合实现和原理解析
  • 关键点数据增强
  • 最小化安装移动云大云操作系统--BCLinux-for-Euler-22.10-everything-x86_64-230316版
  • 003传统图机器学习、图特征工程
  • Apache Tomcat 漏洞复现
  • Oracle-常用权限-完整版
  • jenkins 发布job切换不同的jdk版本/ maven版本
  • 如何在小程序中给会员设置备注
  • PaddleOCR学习笔记2-初步识别服务
  • 【Opencv】Pyhton 播放上一帧,下一帧,存video,逐帧分析
  • 【关于Java:认识异常】
  • 【C++ • STL • 力扣】详解string相关OJ
  • 【Tomcat服务部署及优化】
  • C++之红黑树
  • Go语言网络编程(socket编程)TCP
  • C语言——局部和全局变量
  • 【Java基础篇 | 类和对象】--- 聊聊什么是内部类
  • 合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)
  • mongodb数据库操作
  • 第 2 章 线性表 ( 双链循环线性表(链式存储结构)实现)
  • redis在日常开发工作中的常见用法
  • 小程序实现下拉刷新
  • Day 36 贪心算法 part05 : 435. 无重叠区间 763.划分字母区间 56. 合并区间
  • 使用Python将网页数据保存到NoSQL数据库的方法和示例