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-input
            placeholder="输入关键字进行检索"
            clearable
            v-model="filterText">
          </el-input>
          <el-tree
            ref="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.object
    this.getTreeList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.treeName.indexOf(value) !== -1;
    },
    handleCheck(data,node){
      this.evaluateArr = node.checkedNodes
    },
    // 点击树节点 多选逻辑todo
    nodeClick(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 = true
        setTimeout(() => {
          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.evaluateArr
      if(this.evaluateArr.length ==0){
        this.$message.warning('请选择一条危险点')
        return
      }
    },
  }
}
</script>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PhPMyadmin-漏洞复现

前情条件是&#xff1a;首先将我们的PHP版本设置在5.5以上 注&#xff1a;禁止用于未授权的测试! 首先搭建环境&#xff0c;登录后台 点击》》SQL 查看当前的日志状态 SHOW VARIABLES LIKE general%;因为之前我原来做过所以general_log 是开启的&#xff0c;如果vlau 是OF…

【2024】使用Docker搭建redis sentinel哨兵模式集群全流程(包含部署、测试、错误点指正以及直接部署)

目录&#x1f4bb; 前言**Docker Compose介绍**最终实现效果 一、搭建集群1、创建文件结构2、创建redis节点3、验证节点4、创建sentinel哨兵5、验证Sentinel功能 二、spring连接1、添加依赖2、添加配置3、启动测试 三、直接部署流程1、拉取配置2、修改端口创建 前言 本篇文章主…

泷羽sec-shell编程(完结) 学习笔记

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

眼部按摩仪WT2605音频蓝牙语音芯片方案 单芯片实现语音提示及控制/手机无线音频传输功能

随着科技的快速发展&#xff0c;人们的生活方式也在不断改变&#xff0c;智能化、便捷化的产品逐渐成为市场的主流。眼部按摩仪作为一种结合了现代科技与健康生活理念的产品&#xff0c;受到了广大消费者的青睐。而在众多眼部按摩仪中&#xff0c;采用WT2605音频蓝牙芯片的方案…

相交链表和环形链表

&#xff08;一&#xff09;相交链表 相交链表 思路&#xff1a;先分别计算出A列表和B列表的长度&#xff0c;判断它们的尾节点是否相等&#xff0c;如果不相等就不相交&#xff0c;直接返回空。然后让两个列表中的长的列表先走它们的差距步&#xff0c;然后再一起走&#xff…

知识竞赛活动中现场用到的对讲机有哪些

在知识竞赛活动中&#xff0c;现场工作人员间一般通过对讲机进行联系和调动&#xff0c;那么&#xff0c;知识竞赛活动现场常用的对讲机品牌和型号有哪些呢&#xff0c;主要包括宝锋BF-888S、威贝特WBT-V1Plus、摩托罗拉V168、泉盛UV-K6和海能达S1等。这些对讲机各具特色&#…

reverse_re3

一、使用Exeinfo PE查壳 64无壳 二、使用IDA静态分析 1.找main&#xff0c;没有找到。按ShifeF12字符串查找&#xff0c;发现flag{md5(your input)}:md5加密&#xff0c;所以要找输入值。 2.点击后&#xff0c;发现所在函数sub_940 3.进入函数&#xff0c;使用R键将数字转换…

图论入门教程:GTM173 Graph Theory

这是本图论的入门教材&#xff0c;Graph Theory Fifth Edition&#xff0c;隶属于著名的GTM系列&#xff0c;作者是Reinhard Diestel。这是本对新人友好的教材&#xff0c;之前本科上离散数学的课时&#xff0c;因为涉及到图论&#xff0c;而学校的课堂又太水让我心生不满&…

c++ A*搜索算法

算法原理 A*算法通过以下公式计算节点的优先级&#xff1a; f(n)g(n)h(n)f(n)&#xff1a;节点 n的总优先级&#xff0c;表示从起点通过节点 n 到目标点的估计代价。g(n)&#xff1a;从起点到节点 n 的实际代价。h(n)&#xff1a;从节点 n到目标点的启发式估计代价。 A*的核…

修理一个433Mhz遥控器无法遥控和接触不良的故障

修了一个遥控器&#xff0c;故障表现为其中一个硅胶按键接触不良&#xff0c;使劲按压&#xff0c;却是时而可以时而无法遥控。另外一个为完全无法遥控。 按键部分图示如下 用频谱看&#xff0c;能发射的遥控器发出430Mhz的信号&#xff0c;虽然有接触不良&#xff0c;但是可以…

RabbitMQ 客户端工程环境配置

RabbitMQ 客户端工程环境配置 下面分别以 C# 控制台应用程序 、 Unity 工程为例 一 C# 控制台应用程序 &#xff08;1&#xff09;新建项目 (2) RabbitMQ 需要通过 NuGet 安装 打开项目解决方案 -> 依赖项(右键) -> 管理 NuGet 程序包 -> 搜索 RabbitMQ.Client -&…

Flutter | 基于函数式编程的通用单选列表设计

背景 项目中多次用到如下图的通用单选列表页&#xff1a; 常规封装 此列表需要三样东西&#xff1a; 标题数组当前选中项的 index点击 cell 的回调 封装大体如下&#xff1a; import package:flutter/material.dart;class ListPage1 extends StatefulWidget {const ListPa…

使用Python OpenCV实现图像形状检测

目录 一、环境准备 二、读取和预处理图像 读取图像 灰度化 滤波去噪 三、边缘检测 四、查找轮廓 五、绘制轮廓 六、形状分类 七、显示结果 八、完整代码示例 九、总结 图像形状检测是计算机视觉领域中的一项关键技术,广泛应用于工业自动化、机器人视觉、医学图像处…

ffmpeg 增亮 docker 使用

使用最新的 docker pull jrottenberg/ffmpeg docker run -it --rm -v /path/to/input:/input -v /path/to/output:/output jrottenberg/ffmpeg <ffmpeg command>比如我想增亮 在 /home 目录下 有一个 video.mp4 docker run --rm -v /home:/home jrottenberg/ffmpeg:7…

C与指针。

目录 1_指针理解 1.1变量的值 1.2变量的地址 1.3指针 1.4取变量的地址 2_分析指针 2.1分析指针变量的要素 2.2根据需求定义指针变量 3_指针的使用 3.1指针对变量的读操作 3.2指针对变量的写操作 4_指针占用空间的大小与位移 4.1指针占用空间的大小 4.2指针的位移…

算法与数据结构(1)

一&#xff1a;数据结构概论 数据结构分为初阶数据结构&#xff08;主要由C语言实现&#xff09;和高阶数据结构&#xff08;由C实现&#xff09; 初阶数据结构当中&#xff0c;我们会学到顺序表、链表、栈和队列、二叉树、常见排序算法等内容。 高阶数据结构当中&#xff0…

Oracle12.2 RAC集群管理修改IP地址(DNS解析)

Oracle12.2 RAC集群管理之修改IP地址 该章节实验是基于此章节基础上操作&#xff1a; Oracle LinuxR7安装Oracle 12.2 RAC集群实施&#xff08;DNS解析&#xff09;-CSDN博客 环境 改前IP&#xff1a; 172.30.21.101 hefei1 hefei1.hefeidb.com 172.30.21.102 hefei2 …

【阅读笔记】Android广播的处理流程

关于Android的解析&#xff0c;有很多优质内容&#xff0c;看了后记录一下阅读笔记&#xff0c;也是一种有意义的事情&#xff0c; 今天就看看“那个写代码的”这位大佬关于广播的梳理&#xff0c; https://blog.csdn.net/a572423926/category_11509429.html https://blog.c…

基于rpcapd与wireshark的远程实时抓包的方法

基于rpcapd与wireshark的远程实时抓包的方法 服务端安装wireshark侧设置 嵌入式设备或服务器上没有图形界面&#xff0c;通常使用tcpdump抓包保存为pcap文件后&#xff0c;导出到本地使用wireshark打开分析&#xff0c;rpcapd可与wireshark配合提供一种远程实时抓包的方案&…

SpringBoot3如何基于ServletRequestHJandledEvent检测接口响应时间以及对应的参数

在 Spring Boot 3 中&#xff0c;可以通过实现 ServletRequestHandledEvent 事件来监测接口的响应时间以及相关的参数。ServletRequestHandledEvent 是 Spring 的应用事件之一&#xff0c;它在请求处理完成时发布&#xff0c;包含有关请求的信息。 以下是一个步骤指南&#xff…