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

Vue+Elementui el-tree树只能选择子节点并且支持检索

news 来源：原创 2025/7/14 14:12:31

效果：

只能选择子节点添加配置添加检索代码

源码：

<template><div><el-button  size="small" type="primary" clearable :disabled="disabled" @click="showSign">危险点评估</el-button><!-- 规则绑定流程节点--><el-dialog title="危险点评估" :visible.sync="show" v-if="show" width="700px" append-to-body><el-form ref="formEvaluate" :model="formEvaluate"  label-width="80px"><el-form-item label="危险点"><el-inputplaceholder="输入关键字进行检索"clearablev-model="filterText"></el-input><el-treeref="Tree":data="treeData":show-checkbox="true":check-strictly="true"node-key="id"default-expand-all:highlight-current="true":expand-on-click-node="false"@node-click="nodeClick":props="defaultProps":check-on-click-node="true"@check="handleCheck":filter-node-method="filterNode"><span class="custom-tree-node" slot-scope="{ node, data }"><span><span class="custom-expand-icon" v-if="!data.children || data.children.length === 0"><img src="@/assets/images/fl.png" class="icon" /></span><span class="custom-expand-icon" v-else><img src="@/assets/images/home.png" class="icon" /></span>{{ data.treeName }}</span></span></el-tree></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="show = false">取 消</el-button><el-button type="primary" @click="saveGz">确 定</el-button></div></el-dialog></div>
</template><script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptTreeSelect } from "@/api/system/user";
import { selectPcModelByTableZb } from '@/api/index-analysis/indicator-maintenance'
import { doubleTicketAppraise } from '@/api/flowable/definition'
export default {name: 'tsSelectTree',components: { Treeselect },props: {value: {default:''},conf: {type: Object},disabled: {}},data() {return {currentValue: undefined,filterText: '',options: [],list: [],loading: false,show:false,cache: [],input_val: this.value,object:this.conf,formEvaluate:{formName:null,formId:null,nodeId:null,nodeName:null,lcName:null,lcId:null,tableZbbmId:null,tableZbbmIds:[],},//规则数据treeData:[],//选中的数据json数组jsonData:[],evaluateArr:[],defaultProps: {children: "children",label: "label",disabled: function (data, node) {//带子级的节点不能选中if (data.children && data.children.length > 0) {return true} else {return false}}},}},watch: {value: {handler(val) {if (val !== this.currentValue) {if (this.multiple) {if (Object.prototype.toString.call(val) === '[object String]') {try {this.currentValue = JSON.parse(val)} catch (e) {this.currentValue = val.split(',')}}if (Object.prototype.toString.call(val) === '[object Array]') {this.currentValue = val}} else {this.currentValue = val || undefined}}},immediate: true,deep: true},currentValue() {this.$emit('input', this.currentValue)this.$emit('change', this.currentValue)},filterText(val) {this.$refs.Tree.filter(val);}},created() {this.getDate()const object = this.objectthis.getTreeList()},methods: {filterNode(value, data) {if (!value) return true;return data.treeName.indexOf(value) !== -1;},handleCheck(data,node){this.evaluateArr = node.checkedNodes},// 点击树节点 多选逻辑todonodeClick(data,node, indeterminate) {if(node.childNodes.length > 0){return}},cancel(){this.show = false},showSign() {this.show = true;},// 节点单击事件handleNodeClick(data) {this.currentValue = data.label;sessionStorage.setItem('deptId',data.id)this.show = false},remoteMethod(query) {if (query !== '') {this.loading = truesetTimeout(() => {this.getDate(query)}, 500)} else {this.options = this.cache}},getDate(query) {deptTreeSelect().then((response) => {// 获取树形的部门数据this.options = response.data;sessionStorage.setItem('deptInfo',this.options && JSON.stringify(this.options))});},getTreeList() {const params = {tableZb:'WXDPG'};selectPcModelByTableZb(params).then((response) => {this.treeData = response.data;});},saveGz(){this.formEvaluate.tableZbbmId = ''this.formEvaluate.tableZbbmIds = []const arr = this.evaluateArrif(this.evaluateArr.length ==0){this.$message.warning('请选择一条危险点')return}},}
}
</script>

Vue+Elementui el-tree树只能选择子节点并且支持检索

效果： 只能选择子节点添加配置添加检索代码源码： <template><div><el-button size"small" type"primary" clearable :disabled"disabled" click"showSign">危险点评估</el-button>…...

编程日记 2025/7/14 14:12:31

MySQL各种问题的原因及解决方案梳理

背景：由于最近一直在做生产环境和测试环境的切换，遇到了各种各样的MySQL问题，为了后面的开发顺利，梳理一下MySQL的报错及解决方案问题1、MySQL的链接数超过了本身MySQL内部设置的链接限制报错信息： // An highlig…...

编程日记 2025/7/14 13:57:30

LeetCode—74. 搜索二维矩阵（中等）

仅供个人学习使用题目描述： 给你一个满足下述两条属性的 m x n 整数矩阵： 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。给你一个整数 target ，如果 target 在矩阵中，返回 true…...

编程日记 2025/7/5 20:46:02

【Redis】Redis介绍

目录 1.Redis是什么? 2. Redis特性 2.1 速度快 2.2 基于键值对的数据结构服务器 2.3 丰富的功能 2.4 简单稳定 2.5 客户端语言多 2.6 持久化 2.7 主从复制 2.8 高可用和分布式 3. Redis使用场景 3.1 缓存(Cache) 3.2 排行榜系统 3.3 计数器应用 3.4 社交网络 …...

编程日记 2025/7/13 22:16:38

Python 3 教程第23篇（模块）

Python3 模块在前面的几个章节中我们基本上是用 python 解释器来编程，如果你从 Python 解释器退出再进入，那么你定义的所有的方法和变量就都消失了。为此 Python 提供了一个办法，把这些定义存放在文件中，为一些脚本或者交互式…...

编程日记 2025/7/8 7:49:10

课题组自主发展了哪些CMAQ模式预报相关的改进技术？

空气污染问题日益受到各级政府以及社会公众的高度重视，从实时的数据监测公布到空气质量数值预报及预报产品的发布，我国在空气质量监测和预报方面取得了一定进展。随着计算机技术的高速发展、空气污染监测手段的提高和人们对大气物理化学过程认识的深入&a…...

编程日记 2025/7/14 5:05:08

七牛云AIGC内容安全方案助力企业合规创新

随着人工智能生成内容(AIGC)技术的飞速发展,内容审核的难度也随之急剧上升。在传统审核场景中,涉及色情、政治、恐怖主义等内容的标准相对清晰明确,但在AIGC的应用场景中,这些界限变得模糊且难以界定。用户可能通过交互性引导AI生成违规内容,为审核工作带来了前所未有的不可预测…...

编程日记 2025/7/14 4:28:12

Vue.js 中的事件处理

在 Vue.js 中，事件处理是用户与应用交互的重要方式。Vue.js 允许开发者以一种声明式的方式来绑定事件监听器，这使得代码更加简洁和易于维护。本文将介绍 Vue.js 中的事件处理，包括常用的事件类型和如何使用它们。 Vue.js 事件基础在 Vue.j…...

编程日记 2025/7/14 13:40:32

Windows用pm2部署node.js项目

Windows上pm2启动命令不生效按照常规启动命令应该如下，但是发现不生效 pm2 start npm --name "project-name" -- start具体如下，可以看到状态都是stopped $ pm2 start npm --name "chatgpt-next-web" -- start [PM2] Starting …...

编程日记 2025/7/12 10:45:58

算法【Java】—— 动态规划之路径问题

前言本文章终点解析第一道题目【不同路径】和最后一道题目【地下城游戏】的动态规划思路，中间几道题目会很快过完，大家如果不熟悉动态规划的思路可以重点看一下这两道题目的解析。不同路径 https://leetcode.cn/problems/unique-paths 解析&#xf…...

编程日记 2025/7/7 14:30:00

DreamFace4.9.0 |AI照片动画师，让照片说话和跳舞

DreamFace是一款有趣的照片动画应用程序，通过AI技术让您的照片唱歌、跳舞甚至说话。只需上传照片并选择歌曲，即可生成动态效果。此外，它还支持图片增强、降噪和高清处理，创建人工智能驱动的头像。无论是让宠物说话还是让朋友唱情歌…...

编程日记 2025/7/9 12:34:20

vue-baidu-map基本使用

vue-baidu-map 是一个基于 Vue.js 的百度地图组件库，它封装了百度地图的 JavaScript API，使得在 Vue 项目中使用百度地图功能更加便捷。下面是如何在 Vue 项目中安装和使用 vue-baidu-map 的步骤： 安装首先确保你的项目已经集成了 Vue 和 …...

编程日记 2025/7/10 15:32:16

新电脑验机-允许上网，同时禁止windows系统联网自动激活

效果： 重要提示：我虽然得到上图效果，但也不确定是否有坑，不保证商家是否认可。笔记本电脑七天无理由退货的前提条件是“windows和office未激活”。如何 oobe\bypassnor 绕过开机联网并创建本地账号的方法我就不写了，搜…...

编程日记 2025/7/13 19:13:48

Android 是否支持AB分区 C:\Users\Administrator>adb shell bengal:/ $ su bengal:/ # getprop |grep treble [ro.treble.enabled]: [true] bengal:/ #返回不为空而且为true，那就是支持pt(project treble)分区进入fastboot模式 adb reboot bootloader查看当前…...

编程日记 2025/7/10 22:10:04

Qt6.8安卓Android开发环境配置

时隔多年，重拾QtCreator下Android开发。发现Qt6下安卓开发环境配置变简单不少！只需三步即可在QtCreator下进行Android开发： 一、使用Qt Mantenance Tool进行Android模块的安装： 如果感觉安装网速较慢，可以查看本人另外…...

编程日记 2025/7/10 18:33:50

JavaSE——类与对象（4）

一、静态变量 1.1为什么要有静态变量现在有一群小朋友在做游戏，不是有新的小朋友加入，请问如何知道现在共有多少人在完？看这段代码： public class first {public static void main(String[] args) {int count 0;child child1 …...

编程日记 2025/7/14 5:08:05

网络编程中的字节序函数htonl()、htons()、ntohl()和ntohs()

目录 1，网络字节序和主机字节序 2. 函数的具体作用 2.1,htonl（Host to Network Long） 2.2,htons（Host to Network Short) 2.3,ntohl（Network to Host Long） 2.4,ntohs（Network to Host Sho…...

编程日记 2025/7/9 13:49:28

如何在HarmonyOS NEXT中处理页面间的数据传递？

大家好，前两天的Mate70的发布，让人热血沸腾啊，不想错过，自学的小伙伴一起啊，今天分享的学习笔记是关于页面间数据伟递的问题，在HarmonyOS NEXT 5.0 中，页面间的数据传递可以有很多种方式&#x…...

编程日记 2025/7/11 12:36:32

【Code First】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列 &#x1f…...

编程日记 2025/7/9 11:38:01

Day28 贪心算法 part02

122.买卖股票的最佳时机II 本题解法很巧妙，本题大家可以先自己思考一下然后再看题解，会有惊喜！ class Solution {public int maxProfit(int[] prices) {//分析每一天的情况。只要保证今天买，明天卖可以不亏钱，那就是最大的利润。把每一天可以赚钱的机会都不放过,先把能挣…...

编程日记 2025/7/14 10:12:57

JVM_栈详解一

1、栈的存储单位 **栈中存储什么？**， 每个线程都有自己的栈，栈中的数据都是以栈帧（Stack Frame）的格式存在。在这个线程上正在执行的每个方法都各自对应一个栈帧（Stack Frame）。栈帧是一个内存…...

编程日记 2025/7/13 23:20:07

深入浅出UART驱动开发与调试：从基础调试到虚拟驱动实现

往期内容本专栏往期内容：Uart子系统 UART串口硬件介绍深入理解TTY体系：设备节点与驱动程序框架详解Linux串口应用编程：从UART到GPS模块及字符设备驱动解UART 子系统：Linux Kernel 4.9.88 中的核心结构体与设计详解IMX 平台UART驱…...

编程日记 2025/7/10 10:06:56

集成量子光子学（IQP）

IQP 正在成为量子计算的可行替代方案量子源、波导和调制器等领域的研究使这成为可能与 CMOS 技术的兼容意味着工业可扩展性将更加容易量子光子学的基本组成部分 IQP 系统的基本组成部分包括： 来源（例如腔体中的 QD） 波导定向耦合器&#…...

编程日记 2025/7/12 14:07:50

【代码随想录|贪心算法02】

122.买股票的最佳时机题目链接https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii 好巧妙的一道题啊，做之前完全不会想到这种解法。局部最优：收集每天正利润全局最优：求得最大利润这道题只让你返回最大的利润和&…...

编程日记 2025/7/10 14:45:34

CentOS7 使用xtrabackup备份及恢复

安装备份工具 1.安装Percona yum存储库 sudo yum install https://repo.percona.com/yum/percona-release-latest.noarch.rpm安装过程中需要按y继续安装 2.启用Percona Server 5.7存储库 sudo percona-release setup ps573、安装percona-xtrabackup-24 sudo yum -y instal…...

编程日记 2025/7/9 12:48:01

【网络安全设备系列】12、态势感知

0x00 定义： 态势感知（Situation Awareness，SA）能够检测出超过20大类的云上安全风险，包括DDoS攻击、暴力破解、Web攻击、后门木马、僵尸主机、异常行为、漏洞攻击、命令与控制等。利用大数据分析技术，态势感…...

编程日记 2025/7/9 4:41:51

VM Virutal Box的Ubuntu虚拟机与windows宿主机之间设置共享文件夹(自动挂载，永久有效）

本文参考如下链接 How to access a shared folder in VirtualBox? - Ask Ubuntu （1）安装增强功能（Guest Additions） 首先，在网上下载VBoxGuestAdditions光盘映像文件下载地址：Index of http://…...

编程日记 2025/7/9 18:55:33

【docker集群应用】Docker--harbor私有仓库部署与管理

文章目录 Harbor特性Harbor构成Harbor部署与管理Harbor 部署实例环境准备1. 部署 Docker-Compose 服务2. 部署 Harbor 服务(1) 下载并解压 Harbor 安装程序(2) 修改 Harbor 配置文件 3. 启动 Harbor4. 查看 Harbor 启动镜像5. 创建一个新项目6. 在其他客户端上传镜像维护管理 …...

编程日记 2025/7/9 14:01:03

【优选算法】位运算

目录常见位运算总结1、基础位运算2、给一个数n，确定它的二进制位的第x位上是0还是13、将一个数n的二进制位的第x位改成14、将一个数n的二进制位的第x位改成05、位图的思想6、提取一个数n的二进制位中最右侧的17、将一个数n的二进制位中最右侧的1变为08、位运算的优…...

编程日记 2025/7/12 16:46:07

2.mybatis整体配置

文章目录 mybatis-config.xml介绍SqlSessionFactoryBuilderXMLConfigBuilderpropertiessetting类型别名（typeAliases）扫描插件(plugins)解析objectFactory(对象工厂)解析objectWrapperFactory解析reflectorFactorysettingsElement()方法环境配置&#xf…...

编程日记 2025/7/14 1:26:17

js中判断数组和判断对象的方法

判断数组 Array.isArray() 方法这是最推荐的方法，简单明了。它可以检测数组的情况，并且不会误报其他类型。 const arr [1, 2, 3]; console.log(Array.isArray(arr)); // trueconst notArray { key: value }; console.log(Array.isArray(notArray))…...

编程日记 2025/7/9 8:31:47

【godot】如何立刻(实时)进行碰撞检测？

因为最近在做帧同步方面的内容，所以发现了这个问题。方案1：用Area2d进行碰撞检测，绑定body_entered信号。缺陷： Area2d的碰撞检测只会每个物理迭代中只会执行一次，即在physics_process()结束后执行一次。场景&a…...

编程日记 2025/7/14 14:08:59

讨论JAVA、JVM与Spring

Q1: 作为一个JAVA开发人员，对于jvm肯定不陌生，但很多人对它不陌生也仅止于概念上，而且对概念也是模糊不清的，但jvm实际是java程序运行在其中的实际存在的环境，对它的理解应该要是具象化的。我们还是从一项技术产生的…...

编程日记 2025/7/13 21:20:16

基于SpringBoot实现的民宿管理系统(代码+论文)

🎉博主介绍：Java领域优质创作者，阿里云博客专家，计算机毕设实战导师。专注Java项目实战、毕设定制/协助 📢主要服务内容：选题定题、开题报告、任务书、程序开发、项目定制、论文辅导 💖精彩专栏…...

编程日记 2025/7/13 21:16:41

vue2 - 22.vant 组件库

vant 组件库 vant2下载： npm i vantlatest-v2 --legacy-peer-deps 目标：认识第三方 Vue组件库 vant-ui 组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。 https://vant-contrib.gitee.io/vant/v2/#/zh-CN…...

编程日记 2025/7/9 23:17:08

Git简单介绍

一、 Git介绍与安装 1.1 Git简介 Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 1.2集中式(SVN） VS 分布式(git) 集中式版本控制系统，版本库是集中存放在中央服务器的，工作时要先从中央…...

编程日记 2025/7/11 17:25:40

【ArcGIS Pro实操第11期】经纬度数据转化成平面坐标数据

经纬度数据转化成平面坐标数据数据准备ArcGIS操作步骤-投影转换为 Sinusoidal1 投影2 计算几何Python 示例另：Sinusoidal (World) 和 Sinusoidal (Sphere) 的主要区别参考数据准备数据投影： 目标投影：与MODIS数据相同（Sinu…...

编程日记 2025/7/13 13:43:57

六大排序算法：插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序

本章讲述数据结构中的六大排序算法欢迎大佬们踊跃讨论，感谢大家支持！ 我的博客主页链接六大排序算法一.插入排序1.1 直接插入排序1.2 希尔排序二.选择排序2.1 单向选择排序2.2双向选择排序2.3 堆排序三.交换排序3.1 冒泡排序3.2 快速排序3.2.1 Hoa…...

编程日记 2025/7/10 13:27:41

量化交易系统开发-实时行情自动化交易-4.4.1.做市策略实现

19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。接下来继续说说做市策略实现。做市策…...

编程日记 2025/7/7 17:02:52

Unity类银河战士恶魔城学习总结（P149 Screen Fade淡入淡出菜单）

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址：https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了进入游戏和死亡之后的淡入淡出动画效果 UI_FadeScreen.cs 1. Animator 组件的引用 (anim) 该脚本通过 Animator 控制 UI 元…...

编程日记 2025/7/7 5:19:12

线上＋线下≠新零售，6大互通诠释新零售的核心要点-亿发

新零售，这个词汇在近年来频繁出现在我们的视野中，它不仅仅是线上与线下的简单相加，而是一场深刻的商业变革。本文将通过6大互通的核心要点，为您揭示新零售的真正内涵。 1. 商品的互联互通新零售模式下，商品的互联互…...

编程日记 2025/7/7 22:17:24

渗透测试学习笔记（一）渗透测试方法论

一.渗透测试方法论渗透测试方法论是制定实施信息安全审计方案时，需要遵循的规则，惯例和过程。人们在评估网络，应用，系统或者三者组合的安全状态时，不断摸索各种实务的理念和成熟的做法，并总结了一套理论-…...

编程日记 2025/7/11 13:40:11

国外媒体发布新闻稿/海外媒体网站发稿创历史新潮流

国外媒体发布新闻稿/海外媒体网站发稿创历史新潮流外媒发稿谷歌 SEO 优化经典案例冲出媒体宣发新高潮在当今数字化的时代，媒体宣发的重要性日益凸显。无论是企业品牌推广、产品发布，还是个人形象塑造，有效的媒体宣发都能带来巨大的影响力和…...

编程日记 2025/7/10 13:13:34

Three.js渲染较大的模型之解决方案

文章目录 Three.js渲染较大的模型解决方案视锥体剔除实例和遮挡剔除实例视锥体剔除（Frustum Culling）实例原理概述代码示例解释遮挡剔除（Occlusion Culling）实例原理概述代码示例解释 three.js 模型压缩 Three.js渲染较大的模…...

编程日记 2025/7/6 3:47:21

webpack 项目访问静态资源

使用 webpack dev serve 启动 react 项目后，发现无法使用 http://localhost:8080/1.png 访问到项目的 /static 目录下的 1.png 文件。我的 webpack-dev.js 配置如下： const webpack require(webpack) const webpackMerge require(webpack-merge) cons…...

编程日记 2025/7/13 18:25:58

Day 25

491.递增子序列力扣题目链接(opens new window) 给定一个整型数组, 你的任务是找到所有该数组的递增子序列，递增子序列的长度至少是2。示例: 输入: [4, 6, 7, 7]输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, 7, 7], [6, 7], [6, 7, 7], [7,7], [4,7,7]] 说明: …...

编程日记 2025/7/14 12:38:23

【金猿案例展】无锡征信——百望云绿色金融数据要素+数据资产入表服务方案...

‍ 百望云数据要素案例该数据要素项目案例由百望云投递并参与“数据猿年度金猿策划活动——2024数据要素产业年度创新服务企业榜单/奖项”评选。大数据产业创新服务媒体 ——聚焦数据改变商业在数字化浪潮奔涌的时代，数据要素已成为驱动经济发展的关键引擎&…...

编程日记 2025/7/12 19:02:39

【C++】C++新增特性解析：Lambda表达式、包装器与绑定的应用

V可变参数模板与emplace系列 C语法相关知识点可以通过点击以下链接进行学习一起加油！命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现…...

编程日记 2025/7/14 5:12:00

python学opencv|读取图像

【1】引言前序学习了使用matplotlib模块进行画图，今天开始我们逐步尝试探索使用opencv来处理图片。【2】学习资源官网的学习链接如下： OpenCV: Getting Started with Images 不过读起来是英文版，可能略有难度，所以另推荐一…...

编程日记 2025/7/13 19:12:05

租辆酷车小程序开发（二）—— 接入微服务GRPC

vscode中golang的配置设置依赖管理 go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct GO111MODULEauto 在$GOPATH/src 外面且根目录有go.mod 文件时，开启模块支持 GO111MODULEoff 无模块支持，go会从GOPATH 和 vendor 文件夹寻找包…...

编程日记 2025/7/13 6:33:48

相关文章：