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

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

源码:
<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>…...
Lumos学习王佩丰Excel第十八讲:LOOKUP函数与数组
一、回顾统计函数 1、使用SUMIF函数 sumif(条件区域,求和条件,求和区域) 2、使用SUMIFS函数 SUMIFS(求和范围, 条件范围1, 条件1, 条件范围2, 条件2, ...) 二、认识数组 1、数组生成原理 所谓数组,是有序的元素序列。组成数组的各个变量称为数组的元素。对于Ex…...
Git的基本使用操作
文章目录 Git 全局配置基本操作Git 常用命令版本回退根据版本号回滚分支远端分支 🏡作者主页:点击! 🤖Git专栏:点击! ⏰️创作时间:2024年12月1日12点50分 Git 全局配置 虽然说是全局配置&am…...
【C语言】结构体嵌套
结构体嵌套是指在一个结构体中定义另一个结构体作为其成员。这种方式可以实现更复杂的数据结构设计,便于对数据进行分层管理和组织,广泛应用于实际开发中,例如操作系统内核、嵌入式系统、网络协议解析等。下面是对结构体嵌套的详细介绍&#…...
PDF view | Chrome PDF Viewer |Chromium PDF Viewer等指纹修改
1、打开https://www.browserscan.net/zh/ 2、将internal-pdf-viewer改为 internal-pdf-viewer-jdtest看下效果: 3、源码修改: third_party\blink\renderer\modules\plugins\dom_plugin_array.cc namespace { DOMPlugin* MakeFakePlugin(String plugin_…...
maxun爬虫工具docker搭建
思路来源开源无代码网络数据提取平台Maxun 先把代码克隆到本地(只有第一次需要) git clone https://github.com/getmaxun/maxun.git 转到maxun目录 cd maxun 启动容器 docker-compose --env-file .env up -d 成功启动六个容器 网址 http://local…...
JAVAWeb之javascript学习
1.js引入方式 1. 内嵌式:在head中,通过一对script标签引入JS代码;cript代码放置位置有一定的随意性,一般放在head标签中;2.引入外部js文件 在head中,通过一对script标签引入外部JS代码;注意&…...
vue3中是如何实现双向数据绑定的
在 Vue 3 中,双向数据绑定主要通过 v-model 指令实现。v-model 是一个语法糖,它内部实际上结合了 v-bind 和 v-on 指令来实现数据的双向绑定。下面详细介绍 Vue 3 中双向数据绑定的实现原理和使用方法。 双向数据绑定的基本原理 v-bind 指令࿱…...
JavaScript事件机制详解
JavaScript中的事件模型是指当用户与网页进行交互时,浏览器会触发不同类型的事件,开发者可以通过添加事件监听器来响应这些事件。事件流是描述事件在页面元素中传播的过程,从窗口对象开始,逐级向下传播到最具体的元素,…...
k8s运行运行pod报错超出文件描述符表限制
1.问题描述 运行pod超过文件描述符表 unable to allocate file descriptor table - out of memory/opt/COMMAND.sh: line 9: 2.查看设备的文件描述符限制 操作前一定要先查询这个值,2097152这个值即为我们可设置的最大值,超过这个值后将无法登录&am…...
vue 2 父组件根据注册事件,控制相关按钮显隐
目标效果 我不注册事件,那么就不显示相关的按钮 注册了事件,才会显示相关内容 实现思路 组件在 mounted 的时候可以拿到父组件注册监听的方法 拿到这个就可以做事情了 mounted() {console.log(this.$listeners, this.$listeners);this.show.search !…...
22智能 图
例题 根据下列顶点之间的关系,画出相应的图结构 A -> B, C, D B -> A, C, C -> A, D, E, D -> B, E, E -> C, 数据结构:使用邻接表表示图,每个顶点有一个链表来存储与它相邻的顶点。 功能: 创建图。 添加边。 打…...
Springfox、Swagger 和 Springdoc
Springfox、Swagger 和 Springdoc 是用于在 Spring Boot 项目中生成 API 文档的工具,但它们之间有显著的区别和演进关系: 1. Swagger 简介 Swagger 是一个开源项目,旨在为 RESTful APIs 提供交互式文档。最早由 SmartBear 开发,…...
编程基础篇
什么是编程? 原文地址 :样式不太熟悉,有点单一,原文地址 一千个人眼中有一千个哈姆雷特,以下是我眼中的编程: A每天出门需要关一下空调,在家喜欢室内温度在 20左右,6 点左右会打开灯…...
GPT视角下,如何在密码学研究中找到属于你的方向?
(本文所有内容由GPT生成)在密码学领域发现关键性的研究方向并成为一位优秀的密码学研究员,需要结合对领域趋势的洞察、扎实的理论基础以及创新的研究思维。以下是具体步骤和方法: 一、发现关键性研究方向 关注领域前沿动态 顶级会…...
【经典】星空主题的注册界面HTML,CSS,JS
目录 界面展示 完整代码 说明: 这是一个简单的星空主题的注册界面,使用了 HTML 和 CSS 来实现一个背景为星空效果的注册页面。 界面展示 完整代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&…...
Linux学习——4_WEB服务器的部署及优化
WEB服务器的部署及优化 用户常用关于web信息 什么是www www是world wide web的缩写,即万维网,也就是全球信息广播 通常说的上网就是使用www来查询用户所需要的信息。 www可以结合文字、图形、影像以及声音等多媒体,超链接的方式将信息以…...
《Vue 组件化开发:构建可复用的模块》
一、Vue 组件化开发概述 组件化是 Vue.js 的核心概念之一,它允许将界面拆分成独立、可复用的组件,使得开发大型应用变得更加简单和高效。 组件的定义是实现应用中局部功能代码和资源的集合。Vue.js 的组件化用于将 UI 页面分割为若干组件进行组合和嵌套…...
贪心算法理论
系列博客目录 文章目录 系列博客目录贪心算法 (Greedy Algorithm)贪心算法的特点贪心算法的适用条件常见的贪心算法问题贪心算法的步骤贪心算法示例:活动选择问题贪心算法的优缺点 贪心算法 (Greedy Algorithm) 贪心算法是一种在每一步选择中都采取当前状态下最优的…...
JVM之Synthetic
Synthetic是人造,合成的意思,在虚拟机很多地方使用ACC_SYNTHETIC表示编译器自动生成的,区别于我们自己写的程序代码。这样说可能比较模糊,我们举个例子:我们创建一个内部类,如下 public class TestInnerCl…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
