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…...
SDMatte Web服务灰度发布:新模型版本AB测试与用户反馈闭环机制
SDMatte Web服务灰度发布:新模型版本AB测试与用户反馈闭环机制 1. 引言 在AI图像处理领域,模型迭代更新是持续提升服务质量的必经之路。SDMatte作为一款专注于高质量图像抠图的AI模型,近期完成了新版本SDMatte的研发工作。本文将详细介绍我…...
OpenClaw量化对比:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF不同精度版本的自动化任务表现
OpenClaw量化对比:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF不同精度版本的自动化任务表现 1. 测试背景与实验设计 去年在开发一个自动化文档处理流程时,我发现OpenClaw的任务成功率与底层模型量化精度密切相关。当时使用Q8版本处理Excel文…...
Web地图开发避坑指南:墨卡托和UTM坐标系到底怎么选?
Web地图开发坐标系选择指南:墨卡托与UTM的深度对比 当我们打开手机地图应用查看附近餐厅时,很少有人会思考背后复杂的坐标系转换过程。作为一名长期从事WebGIS开发的工程师,我见过太多项目因为坐标系选择不当而导致定位偏移、性能下降甚至数据…...
5分钟搞定局域网IP扫描:OpUtils保姆级配置教程(附常见问题排查)
5分钟搞定局域网IP扫描:OpUtils保姆级配置教程(附常见问题排查) 办公室里突然断网了?打印机死活连不上?新同事的电脑无法接入内网?作为中小企业IT运维人员,这些场景你一定不陌生。别急着打电话求…...
PyFluent:重新定义CFD仿真自动化的技术革命
PyFluent:重新定义CFD仿真自动化的技术革命 【免费下载链接】pyfluent 项目地址: https://gitcode.com/gh_mirrors/pyf/pyfluent 行业痛点分析:CFD工程师的效率困境 在现代工程设计流程中,计算流体动力学(CFD)…...
用MATLAB从零实现六足机器人步态:交替三角与波动步态代码详解
用MATLAB从零实现六足机器人步态:交替三角与波动步态代码详解 六足机器人因其卓越的稳定性和地形适应能力,在野外勘探、灾难救援等领域展现出巨大潜力。而步态规划作为机器人运动控制的核心,直接决定了机器人的移动效率和稳定性。本文将带您从…...
【紧急预警】Mojo nightly build已悄然移除PyModule::import() API!立即备份旧版+迁移至PyO3 0.21+手动GC管理方案(附自动化迁移脚本)
第一章:【紧急预警】Mojo nightly build已悄然移除PyModule::import() API!立即备份旧版迁移至PyO3 0.21手动GC管理方案(附自动化迁移脚本)Mojo nightly build v2024.06.12 起,PyModule::import() 已被彻底移除&#x…...
开源工具实现游戏存档编辑:虚幻引擎存档处理全指南
开源工具实现游戏存档编辑:虚幻引擎存档处理全指南 【免费下载链接】uesave 项目地址: https://gitcode.com/gh_mirrors/ue/uesave 在游戏开发与玩家体验中,虚幻引擎的存档文件往往以二进制格式存储,这给数据修改、备份与分析带来了挑…...
Charticulator:数据可视化的自由创作平台与技术革命
Charticulator:数据可视化的自由创作平台与技术革命 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 当数据分析师面对预设模板无法表达复杂数据关系时…...
ElasticSearch查询集群及设置
Elasticsearch查询集群API示例 查看集群状态及监控 参考资料 https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-health.html https://www.elastic.co/guide/en/elasticsearch/reference/6.6/cluster-nodes-stats.html 查看集群状态 健康状态 curl -XGE…...
