TreeSelect增加可筛选功能

TreeSelect官方可筛选示例

在这里插入图片描述

<template><el-tree-selectv-model="value":data="data"filterablestyle="width: 240px"/><el-divider /><el-divider />filter node method:<el-tree-selectv-model="value":data="data":filter-node-method="filterNodeMethod"filterablestyle="width: 240px"/>
</template><script lang="ts" setup>
import { ref } from 'vue'const value = ref()const sourceData = [{value: '1',label: 'Level one 1',children: [{value: '1-1',label: 'Level two 1-1',children: [{value: '1-1-1',label: 'Level three 1-1-1',},],},],},{value: '2',label: 'Level one 2',children: [{value: '2-1',label: 'Level two 2-1',children: [{value: '2-1-1',label: 'Level three 2-1-1',},],},{value: '2-2',label: 'Level two 2-2',children: [{value: '2-2-1',label: 'Level three 2-2-1',},],},],},{value: '3',label: 'Level one 3',children: [{value: '3-1',label: 'Level two 3-1',children: [{value: '3-1-1',label: 'Level three 3-1-1',},],},{value: '3-2',label: 'Level two 3-2',children: [{value: '3-2-1',label: 'Level three 3-2-1',},],},],},
]
const data = ref(sourceData)const filterNodeMethod = (value, data) => data.label.includes(value)
</script>

应用到本地项目

本地tree数据结构

在这里插入图片描述

本地项目中的tree结构数据,确定筛选的字段名称:name

代码实现

<el-form-item label="父分类编号" prop="parentId"><el-tree-selectv-model="formData.parentId":data="categoryTree":props="defaultProps"check-strictlydefault-expand-all:filter-node-method="filterNodeMethod"filterableplaceholder="请选择父分类编号"/></el-form-item>const filterNodeMethod = (value, data) => data.name.includes(value)      

在这里插入图片描述

注意:变量名要根据本地数据调整

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据安全传输--加密算法

目录 古典加密算法与近代加密算法对比 算法分类 对称加密 常见的对称加密算法 在对称加密算法中密钥共享是一个很麻烦的问题 非对称加密 非对称加密过程 常见非对称加密算法 对称加密和非对称加密两者对比结论 DH算法 身份认证和数据认证技术 hash算法 hash算法特点…

PySide(PyQt),自定义图标按钮

1、在Qt Designer中新建画面&#xff0c;并放置3个按钮&#xff08;QPushButton&#xff09;和一个分组框&#xff08;QGroupBox&#xff09;小部件&#xff0c;分别命名为btn_1&#xff0c; btn_2&#xff0c;btn_3和btnStation。 2、将所有小部件的显示文字内容删除。 3、将…

论文复现:Predictive Control of Networked Multiagent Systems via Cloud Computing

Predictive Control of Networked Multiagent Systems via Cloud Computing论文复现 文章目录 Predictive Control of Networked Multiagent Systems via Cloud Computing论文复现论文摘要系统参数初始化系统模型观测器预测过程控制器设计系统的整体框图仿真结果 论文摘要 翻译…

杰发科技Bootloader(2)—— 基于7840的Keil配置地址

序 在7840的sample代码里面有一个简单的Boot跳转APP的示例 PFlash地址从0开始 DFlash的地址从1000000开始 Boot解析 他的boot地址配置为0 Boot的代码主要是这几行&#xff0c;主要作用就是Flash的跳转 int main(void) {SystemClock_Config();InitDebug();printf("demo…

NSAT-8000与Chroma8000相比,有什么独特优势?

在电源模块的广泛应用推动下&#xff0c;测试效率成为行业关注的焦点。纳米软件响应这一需求&#xff0c;推出了NSAT-8000电源自动测试系统&#xff0c;其0代码操作模式大幅简化了测试流程。那么与Chroma 8000系统相比&#xff0c;有什么不同呢&#xff1f; 一、测试项目搭建 C…

nacos get changed dataId error, code: 403

nacos get changed dataId error, code: 403问题解决 问题出现原因&#xff1a;解决办法&#xff1a;需要在运行项目的配置添加权限账号和密码,重启服务 问题出现原因&#xff1a; 由于nacosserver开启了权限验证&#xff0c;项目启动时出现异常 nacos.core.auth.caching.ena…

数据结构->线性结构->顺序存储->静态链表

一、思路 链表由节点组成。 1、分析需求&#xff0c;画图&#xff1a; 2、定义学生结构体&#xff0c;包含姓名、年龄、性别和下一个学生的指针&#xff1a; #include <stdio.h> #define N 20// 定义性别枚举类型&#xff0c;固定值&#xff0c;不是男就是女 typedef e…

torchscript接口

一、定义 定义script、eager、onnx 模式对比案例生成的模型可以被c调用接口解读 二、实现 定义 可以在高性能环境libtorch&#xff08;C &#xff09;中直接加载&#xff0c;实现模型推理&#xff0c;而无需Pytorch训练框架依赖无需代码&#xff0c;直接加载模型&#xff0c…

国中水务:果汁能救“水”吗?

喝下汇源果汁有什么&#xff08;“功效”&#xff09;&#xff1f;这家公司最有发言权。 今天我们聊聊——国中水务。 最近&#xff0c;国中水务公告称拟通过收购&#xff0c;间接控股北京汇源&#xff0c;即将把“垂涎已久”的汇源收入囊中。 两家的故事得从几年前说起&#…

学习大数据DAY21 Linux基本指令2

目录 思维导图 搜索查看查找类 find 从指定目录查找文件 head 与 tail 查看行 cat 查看内容 more 查看大内容 grep 过滤查找 history 查看已经执行过的历史命令 wc 统计文件 du 查看空间 管道符号 | 配合命令使用 上机练习 4 解压安装类 zip unzip 压缩解压 tar …

git跨库合并

1、背景 A为开发环境的代码仓库&#xff0c;B为生产环境的代码仓库。A和B之间不能通信。开发人员的本地电脑可以和A、B通信。 目的 上线时&#xff0c;需要将A代码合并B代码。 2、实现 2.1 添加远程仓库 2.1.1 代码方式 在B代码仓库中,将A添加为远程仓库。 git remote …

【保姆级教程】油猴脚本的安装使用

目录 前言 一、油猴简介 1. 核心功能 2. 应用场景 3. 安全性与兼容性 4. 社区生态 二、教学开始&#xff08;嫌麻烦直接目录跳转开始学习&#xff09; 1.插件安装&#xff08;以Microsoft Edge浏览器为例&#xff09; 2.获取脚本 3.大展身手 三、扩展&#xff08;脚…

2024年7月23日(samba DNS)

​ 回顾 1、关闭防火墙&#xff0c;关闭selinux systemctl stop firewalld systemctl disable firewalld setenforce 0 2、修改静态IP地址 vim /etc/sysconfig/network-scripts/ifcfg-ens33 #修改uuid的目的是为了保证网络的唯一性 3、重启网络服务 systemctl restart netwo…

Ansible的脚本-----playbook剧本【上】

目录 1.playbook剧本组成 2.playbook剧本实战演练 2.1 实战演练一&#xff1a;给被管理主机安装httpd服务 2.2 实战演练二&#xff1a;定义、引用变量 2.3 实战演练三&#xff1a;指定远程主机sudo切换用户 2.4 实战演练四&#xff1a;when条件判断 2.5 实战演练五&…

【Matlab 传感器布局优化】基于群智能算法的wsn覆盖优化研究

一 背景介绍 无线传感器网络&#xff08;Wireless Sensor Network, WSN&#xff09;作为远程环境监测系统应用的关键技术&#xff0c;能够在有限的能源供应下提供高效的传感和通信服务。覆盖控制是保证高效通信和可靠数据传输的重要手段。鉴于复杂的物理环境限制了节点部署方式…

文本编辑三巨头(grep)

目录 正则表达式 元字符 grep 案例 我在编写脚本的时候发现&#xff0c;三个文本编辑的命令&#xff08;grep、sed、awk&#xff0c;被称为文本编辑三剑客&#xff0c;我习惯叫它三巨头&#xff09;用的还挺多的&#xff0c;说实话我一开始学的时候也有些懵&#xff0c;主要…

Unity3D之TCP网络通信(客户端)

文章目录 概述TCP核心类异步机制 Unity中创建TCP客户端Unity中其它脚本获取TCP客户端接受到的数据后续改进 本文将以Unity3D应用项目作为客户端去连接制定的服务器为例进行相关说明。 Unity官网参考资料&#xff1a; https://developer.unity.cn/projects/6572ea1bedbc2a001ef…

2024年平面设计软件:六大选择

无论是与营销还是产品设计&#xff0c;平面设计都是当今各个行业不可或缺的一部分。然而&#xff0c;随着平面设计软件的范围和复杂性的不断扩展&#xff0c;设计师和业余用户可能更难知道哪些工具最能满足他们的需求。 本文将分析当今流行的分析 6 个平面设计 App&#xff0c…

mac清理软件哪个好用免费 MacBook电脑清理软件推荐 怎么清理mac

随着使用时间的增长&#xff0c;mac电脑会积累一些不必要的垃圾文件&#xff0c;这些文件会占用宝贵的存储空间&#xff0c;影响电脑的运行速度和稳定性。因此&#xff0c;定期清理mac电脑的垃圾文件是非常有必要的。市场上有许多优秀的Mac清理软件&#xff0c;包括一些出色的国…

AI产品经理怎样入门?

AI产品经理需要熟悉AI基础知识&#xff0c;包括AI行业现状&#xff0c;数学统计学&#xff0c;AI模型构建和模型基本概念。 之所以需要具备这些知识&#xff0c;是因为实现AI产品必然会涉及相应的AI技术&#xff0c;如果AI产品经理不了解相应技术基础&#xff0c;就不能很好的…