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.rhkb.cn/news/480163.html

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

相关文章

Pod 动态分配存储空间实现持久化存储

配置 Pod 以使用 PersistentVolume 作为存储 ​ 关于持久卷的介绍&#xff0c;可以看官方文档 https://kubernetes.io/zh-cn/docs/concepts/storage/persistent-volumes/ ​ 持久卷根据存储位置&#xff0c;可以使用本地存储和云存储&#xff0c;如果有云服务平台&#xff0c…

AIGC引领金融大模型革命:未来已来

文章目录 金融大模型的应用场景1. **金融风险管理**2. **量化交易**3. **个性化投资建议**4. **金融欺诈检测和预防**5. **智能客户服务** 金融大模型开发面临的挑战应对策略《金融大模型开发基础与实践》亮点内容简介作者简介获取方式 在AIGC&#xff08;Artificial Intellige…

数据库(MySQL黑马)

基础篇 MySQL概述 数据库概述 数据库相关概念 主流的关系型数据库管理系统 MySQL数据库的安装与启动 下载&#xff1a;MySQL :: MySQL Community Downloads 安装步骤 MySQL―8.0.40超详细保姆级安装教程_mysql8.0.40安装教程-CSDN博客文章浏览阅读1k次。_mysql8.0.40安装教…

MySQL8 CTE解决不定层级树形迭代问题

MySQL Common Table Expressions&#xff08;CTE&#xff0c;公用表表达式&#xff09;是在MySQL 8.0及更高版本中引入的一种高级SQL构造&#xff0c;它允许用户定义一个临时的结果集&#xff0c;这个结果集可以在同一个查询中被多次引用&#xff0c;从而简化复杂的查询逻辑和提…

第六届国际科技创新学术交流大会暨信息技术与计算机应用学术会议(ITCA 2024)

重要信息 会议官网&#xff1a;itca2024.iaecst.org 会议时间&#xff1a;2024年12月06-08日 会议地点&#xff1a;中国-广州&#xff08;越秀国际会议中心&#xff09; 会议简介 第六届信息技术与计算机应用学术会议(ITCA 2024) 依旧作为第六届国际科技创新学术交流大会…

详解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 基本…

golang debug调试

1. 本地调试 1&#xff1a;Add Configurations 添加配置文件&#xff08;Run kind &#xff1a;Directory&#xff09; 2&#xff1a;进入run运行窗口 3&#xff1a;debug断点调试模式 1. Resume Program (继续运行) 图标: ▶️ 或 ► 快捷键: F9&#xff08;Windows/Linux&a…

单点登录深入详解之技术方案总结

技术方案之CAS认证 概述 CAS 是耶鲁大学的开源项目&#xff0c;宗旨是为 web 应用系统提供一种可靠的单点登录解决方案。 CAS 从安全性角度来考虑设计&#xff0c;用户在 CAS 输入用户名和密码之后通过ticket进行认证&#xff0c;能够有效防止密码泄露。 CAS 广泛使用于传统应…

redis大key和热key

redis中大key、热key 什么是大key大key可能产生的原因大key可能会造成什么影响如何检测大key如何优化删除大key时可能的问题删除大key的策略 热key热key可能导致的问题解决热key的方法 什么是大key 大key通常是指占用内存空间过大或包含大量元素的键值对。 数据量大&#xff…

vue3实现自定义导航菜单

一、创建项目 1. 打开HBuilder X 图1 2. 新建一个空项目 文件->新建->项目->uni-app 填写项目名称&#xff1a;vue3demo 选择项目存放目录&#xff1a;D:/HBuilderProjects 一定要注意vue的版本&#xff0c;当前选择的版本为vue3 图2 点击“创建”之后进入项目界面 图…

Windows Qtcreator不能debug 调试 qt5 程序

Windows下 Qt Creator 14.0.2 与Qt5.15.2 正常release打包都是没有问题的&#xff0c;就是不能debug&#xff0c;最后发现是两者不兼容导致的&#xff1b; 我使用的是 编译器是 MinGW8.1.0 &#xff0c;这个版本是有问题的&#xff0c;需要更新到最新&#xff0c;我更新的是Mi…

ubuntu20.04更换安装高版本CUDA以及多个CUDA版本管理

Ubuntu 20.04下多版本CUDA的安装与切换 CUDA安装配置环境变量软连接附上参考博客CUDA安装 cuda官方下载地址 因为我需要安装的是11.1版本的,所以这里按着11.1举例安装 安装命令如下: wget https://developer.download.nvidia.com/compute/cuda/11.1.0/local_installers/cu…

vue实现滚动条滑动到底部分页调取后端接口加载数据

一、案例效果 二、前提条件 接口返回数据 三、案例代码 子组件 const $emit defineEmits([cloneItem, updateList]);const props defineProps({rightList: {type: Array,},chartTableData: {type: Array as () > ChartListType[],},deleteChartInfo: {type: Object,}…

路面交通工具和个数识别,支持YOLO,COCO,VOC三种格式,带标注可识别自行车,摩的,公共汽车,装载机,面包车,卡车,轿车等

预处理 自动定向&#xff1a; 已应用 调整大小&#xff1a; 拉伸至 640x640 增强 每个训练示例的输出&#xff1a; 3 翻转&#xff1a; 水平 自行车 公交车

【05】Selenium+Python 两种文件上传方式(AutoIt)

上传文件的两种方式 一、input标签上传文件 可以用send_keys方法直接上传文件 示例代码 input标签上传文件import time from selenium import webdriver from chromedriver_py import binary_path # this will get you the path variable from selenium.webdriver.common.by i…

深入浅出剖析典型文生图产品Midjourney

2022年7月,一个小团队推出了公测的 Midjourney,打破了 AIGC 领域的大厂垄断。作为一个精调生成模型,以聊天机器人方式部署在 Discord,它创作的《太空歌剧院》作品,甚至获得了美国「数字艺术/数码摄影」竞赛单元一等奖。 这一事件展示了 AI 在绘画领域惊人的创造力,让人们…

[MRCTF2020]Transform

查壳&#xff0c;拖入64位IDA LOBYTE8位就是一个字节&#xff0c;在此处无意义&#xff0c;因为我们输入的本来就是按字节输入的 设 a byte_414040,bdword_40F040,cbyte_40F0E0,输入的字符串为flag; 从题目里得到 加密代码 a[i] flag[b[i]]; a[i] ^ b[i]; c a 即c[i] a[i…

如何通过智能生成PPT,让演示文稿更高效、更精彩?

在快节奏的工作和生活中&#xff0c;我们总是追求更高效、更精准的解决方案。而在准备演示文稿时&#xff0c;PPT的制作往往成为许多人头疼的问题。如何让这项工作变得轻松且富有创意&#xff1f;答案或许就在于“AI生成PPT”这一智能工具的广泛应用。我们就来聊聊如何通过这些…

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

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

【docker】安装数据库脚本

mysql5.7 Docker启动mysql7并挂载文件关闭大小写敏感&#xff0c;【docker】安装mysql-CSDN博客 docker run \--name mysql -d -p 3306:3306 \-v /docker/data/mysql/data:/var/lib/mysql \-v /docker/data/mysql/conf:/etc/mysql/conf.d \-e MYSQL_ROOT_PASSWORD密码 \-e TZ…