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>

 

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

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

相关文章

第33章 - Go语言 云原生开发

第33章 - 云原生开发将深入探讨云原生技术及其在现代软件开发中的应用。我们将从云原生的基本概念开始&#xff0c;逐步介绍Kubernetes的基本使用方法&#xff0c;并结合具体的云服务提供商实例&#xff0c;通过Go语言编写的应用程序来展示如何实现云原生开发。 33.1 云原生的…

分析JHTDB数据库的Channel5200数据集的数据(SciServer服务器)

代码来自https://github.com/idies/pyJHTDB/blob/master/examples/channel.ipynb %matplotlib inline import numpy as np import math import random import pyJHTDB import matplotlib.pyplot as plt import time as ttN 3 T pyJHTDB.dbinfo.channel5200[time][-1] time …

《Vue零基础入门教程》第十二课:双向绑定指令

往期内容 《Vue零基础入门教程》第六课&#xff1a;基本选项 《Vue零基础入门教程》第八课&#xff1a;模板语法 《Vue零基础入门教程》第九课&#xff1a;插值语法细节 《Vue零基础入门教程》第十课&#xff1a;属性绑定指令 《Vue零基础入门教程》第十一课&#xff1a;事…

windows 应用 UI 自动化实战

UI 自动化技术架构选型 UI 自动化是软件测试过程中的重要一环&#xff0c;网络上也有很多 UI 自动化相关的知识或资料&#xff0c;具体到 windows 端的 UI 自动化&#xff0c;我们需要从以下几个方面考虑&#xff1a; 开发语言 毋庸置疑&#xff0c;在 UI 自动化测试领域&am…

linux部署Whisper 视频音频转文字

github链接&#xff1a;链接 我这里使用anaconda来部署&#xff0c;debian12系统&#xff0c;其他linux也同样 可以使用gpu或者cpu版本&#xff0c;建议使用n卡&#xff0c;rtx3060以上 一、前期准备 1.linux系统 链接&#xff1a;debian安装 链接&#xff1a;ubuntu安装 …

MySQL聚合查询分组查询联合查询

#对应代码练习 -- 创建考试成绩表 DROP TABLE IF EXISTS exam; CREATE TABLE exam ( id bigint, name VARCHAR(20), chinese DECIMAL(3,1), math DECIMAL(3,1), english DECIMAL(3,1) ); -- 插入测试数据 INSERT INTO exam (id,name, chinese, math, engli…

Rust学习笔记_03——元组

Rust学习笔记_01——基础 Rust学习笔记_02——数组 Rust学习笔记_03——元组 文章目录 Rust学习笔记_03——元组元组1. 定义元祖2. 访问元组中的元素3. 元组的解构4. 元组不可遍历和切片5. 元组作为函数返回值6. 单元元组7. 代码演示 元组 在Rust编程语言中&#xff0c;元组&a…

mini-spring源码分析

IOC模块 关键解释 beanFactory&#xff1a;beanFactory是一个hashMap, key为beanName, Value为 beanDefination beanDefination: BeanDefinitionRegistry&#xff0c;BeanDefinition注册表接口&#xff0c;定义注册BeanDefinition的方法 beanReference&#xff1a;增加Bean…

redis学习面试

1、数据类型 string 增删改查 set key valueget keydel kstrlen k 加减 incr articleincrby article 3decr articledecyby article 取v中特定位置数据 getrange name 0 -1getrange name 0 1setrange name 0 x 设置过期时间 setex pro 10 华为 等价于 set pro 华为expire pro…

详解MVC架构与三层架构以及DO、VO、DTO、BO、PO | SpringBoot基础概念

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 今天毛毛张分享的是SpeingBoot框架学习中的一些基础概念性的东西&#xff1a;MVC结构、三层架构、POJO、Entity、PO、VO、DO、BO、DTO、DAO 文章目录 1.架构1.1 基本…

KST-3D01型胎儿超声仿真体模、吸声材料以及超声骨密度仪用定量试件介绍

一、KST-3D01型胎儿超声仿真体模 KST—3D01型胎儿超声体模&#xff0c;采用仿羊水环境中内置胎龄为7个月大仿胎儿设计。用于超声影像系统3D扫描演示装置表面轮廓呈现和3D重建。仿羊水超声影像呈暗回声&#xff08;无回波&#xff09;特性&#xff0c;仿胎儿超声影像呈对比明显…

【附录】Rust国内镜像设置

目录 前言 &#xff08;1&#xff09;设置环境变量 &#xff08;2&#xff09;安装Rust &#xff08;3&#xff09;设置crates镜像 前言 本节课来介绍下如何在国内高速下载安装Rust和Rust依赖&#xff0c;由于网络原因&#xff0c;我们在安装Rust和下载项目依赖时都很慢&am…

【逐行注释】自适应Q和R的AUKF(自适应无迹卡尔曼滤波),附下载链接

文章目录 自适应Q的KF逐行注释的说明运行结果部分代码各模块解释 自适应Q的KF 自适应无迹卡尔曼滤波&#xff08;Adaptive Unscented Kalman Filter&#xff0c;AUKF&#xff09;是一种用于状态估计的滤波算法。它是基于无迹卡尔曼滤波&#xff08;Unscented Kalman Filter&am…

易速鲜花聊天客服机器人的开发(上)

“聊天机器人”项目说明 聊天机器人&#xff08;Chatbot&#xff09;是LLM和LangChain的核心用例之一&#xff0c;很多人学习大语言模型&#xff0c;学习LangChain&#xff0c;就是为了开发出更好的、更能理解用户意图的聊天机器人。聊天机器人的核心特征是&#xff0c;它们可…

ChatGPT/AI辅助网络安全运营之-数据解压缩

在网络安全的世界中&#xff0c;经常会遇到各种压缩的数据&#xff0c;比如zip压缩&#xff0c;比如bzip2压缩&#xff0c;gzip压缩&#xff0c;xz压缩&#xff0c;7z压缩等。网络安全运营中需要对这些不同的压缩数据进行解压缩&#xff0c;解读其本意&#xff0c;本文将探索一…

05_JavaScript注释与常见输出方式

JavaScript注释与常见输出方式 JavaScript注释 源码中注释是不被引擎所解释的&#xff0c;它的作用是对代码进行解释。lavascript 提供两种注释的写法:一种是单行注释&#xff0c;用//起头:另一种是多行注释&#xff0c;放在/*和*/之间。 //这是单行注释/* 这是 多行 注释 *…

网络原理(一):应用层自定义协议的信息组织格式 HTTP 前置知识

目录 1. 应用层 2. 自定义协议 2.1 根据需求 > 明确传输信息 2.2 约定好信息组织的格式 2.2.1 行文本 2.2.2 xml 2.2.3 json 2.2.4 protobuf 3. HTTP 协议 3.1 特点 4. 抓包工具 1. 应用层 在前面的博客中, 我们了解了 TCP/IP 五层协议模型: 应用层传输层网络层…

jvm-45-jvm dump 文件内存介绍+获取+堆内存可视分析化

拓展阅读 JVM FULL GC 生产问题 I-多线程通用实现 JVM FULL GC 生产问题 II-如何定位内存泄露&#xff1f; 线程通用实现 JVM FULL GC 生产问题 III-多线程执行队列的封装实现&#xff0c;进一步抽象 jvm-44-jvm 内存性能分析工具 Eclipse Memory Analyzer Tool (MAT) / 内…

【每天多努力一点】Python编程之元组

和列表类似&#xff0c;元组&#xff08;tuple&#xff09;也是由一系列按特定顺序排列的元素组成的一种复合数据类型。 在某些特定的情境下&#xff0c;元组和列表的区别并没有那么明显。 元组的初始化 元组的基本格式 在Python中&#xff0c;列表通常用小括号&#xff08;…

题目 3209: 蓝桥杯2024年第十五届省赛真题-好数

一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &#xff09;上的数字是偶数&#xff0c;我们就称之为“好数”。给定一个正整数 N&#xff0c;请计算从…