el-tree基础的树形节点设置节点不能选中高亮出来,对已经选中的节点设置disabled,对当前节点刚选中后设置禁用disabled

一、 el-tree基础的树形节点设置节点不能选中高亮出来

需求

我们使用element-ui或者element-plus的时候会遇到树形控件的使用,我们使用树形控件会限制有的节点不让选中和高亮出来,这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的,我们就简单来实现一下。

实现效果如下:

在这里插入图片描述

vue2+element-ui

发现element-ui中更改current-node-key值无效,最后用this.$refs.tree.setCurrentKey方法实现了
实现的思路:

  • el-tree加上highlight-current属性,高亮当前选中节点
  • ref="tree"绑定组件
  • el-tree的点击事件@node-click中判断是有子元素的节点,则找到上次高亮的节点,让它继续选中高亮,思路是通过node-key="id"和this.$refs.tree.setCurrentKey方法
  <el-tree:data="treeData":props="defaultProps"@node-click="handleNodeClick"highlight-currentref="tree"node-key="id">handleNodeClick(data, node) {//设置不能选中的节点if (data.disabled) {this.$nextTick(() => {this.$refs.tree.setCurrentKey(this.currentNodeKey);});return;}this.currentNodeKey = data.id;}
vue3+element-plus

发现element-plus中更改current-node-key值是有效的,通过这个属性实现
思路:

  • el-tree加上highlight-current属性,高亮当前选中节点
  • el-tree的点击事件@node-click中判断有子元素的节点不能选中高亮,核心代码node.isCurrent = false,让当前节点取消选中
  • 这时需要找到上次高亮的节点,让它继续选中高亮,思路是通过node-key与current-node-key属性
<template><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" highlight-current  node-key="id"  :current-node-key="currentNodeKey"default-expand-all:expand-on-click-node="false"/>
</template><script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node'
import { ref, nextTick } from "vue"
interface Tree {label: stringchildren?: Tree[]
}const currentNodeKey = ref("")
const treeId = ref("")
const handleNodeClick = (data: Tree, node: Node) => {// 有子元素的节点,不能选中if (data.children.length) {node.isCurrent = false// 值更改,触发watchcurrentNodeKey.value = ""// 还原之前的高亮节点nextTick(() => {currentNodeKey.value = treeId.value})return}treeId.value = data.id// 点击树节点执行的代码...
}const data: Tree[] = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]const defaultProps = {children: 'children',label: 'label',
}
</script>

二、 对已经选中的节点设置disabled

el-tree 动态渲染值对已知节点disabled

实现思路:

  • 从后台动态获取的树的数据
  • 项目需求要把其中的某一个节点设置为禁用
  • 在data中配置el-tree的props
  • 我这里是已知节点的数据 判断节点id来设置disabled
   <el-treeref="tree":data="menuData"show-checkboxnode-key="node_id":props="defaultProps2":default-checked-keys="checkedId"/>
defaultProps2: {children: 'children',label: 'name',disabled: function(data, node) {// 禁用回收站选项if (data.level === 3) {return true}}
}

三、对当前节点刚选中后设置禁用disabled(设置多复选框为不可编辑,只有选中后就不能编辑操作)

实现效果如下:

在这里插入图片描述
具体操作如下:

html

<template><div class="tree3"><span>设置多选复选框为不可编辑,只要选中就不可编辑</span><div style="margin-left: 600px;width:100%"><el-tree:data="data3"ref="tree"show-checkboxnode-key="id":check-on-click-node="checkNodeFlag":default-expanded-keys="[2, 3]"@check-change="handleCheckChageFun"@check="handleCheckFun"></el-tree></div><!--  :default-checked-keys="defaultCheckedKeys" --></div></template>
js

data() {return {checkNodeFlag:false,currNodeId:'',//当前选中nodeIddefaultCheckedKeys:[],data3: [{id: 1,label: '一级 2',disabled:false,children: [{id: 3,label: '二级 2-1',disabled:false}, {id: 2,label: '二级 2-2',disabled:false},{id: 4, label: '2级 4',disabled:false},{id: 5, label: '2级 5',disabled:false},{id: 6, label: '2级 6',disabled:false},{id: 7, label: '2级 7',disabled:false},{id: 8, label: '2级 8',disabled:false},{id: 9, label: '2级 9',disabled:false},{id: 10, label: '2级 10',disabled:false},{id: 11, label: '2级 11',disabled:false},{id: 12, label: '2级 12',disabled:false},{id: 13, label: '2级 13',disabled:false},{id: 14, label: '2级 14',disabled:false},{id: 15, label: '2级 15',disabled:false},{id: 16, label: '2级 16',disabled:false},{id: 17, label: '2级 17',disabled:false},{id: 18, label: '2级 18',disabled:false},]}],disableData:this.data3,defaultProps: {children: 'children',label: 'label'}};
},
methods:{handleCheckChageFun(currNode){console.log("hanleCheckChageFun---");},handleCheckFun(currNode){this.currNodeId = currNode.id;this.defaultCheckedKeys= nullthis.dealTreeOnceChecked(this.data3)},dealTreeOnceChecked(arrMenus){arrMenus === undefined ?  arrMenus=[]:''if(arrMenus.length > 0){//let disarr = [];arrMenus.forEach(item => {let arrChildren = item.childrenif(arrChildren  !== null) this.dealTreeOnceChecked(arrChildren)item.id === this.currNodeId ?  item.disabled = true :'';})}}}

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

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

相关文章

WSL2+ubuntu 18+VsCode 配置C/C++开发环境 踩坑

1. 管理员模式打开cmd&#xff0c;或PowerShell &#xff0c;输入 wsl --install 可能出现的错误&#xff1a;无法解析服务器名称或地址 解决方式&#xff1a;科学上网 安装WSL时遇到“无法解析服务器名称或地址”的错误及解决方法 - 知乎 错误2&#xff1a;Error 0x8037…

Python tkinter (6) Listbox

Python的标准Tk GUI工具包的接口 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 GUI 目录 Listbox 创建listbox 添加元素…

TPCC-MySQL

简介 TPC-C是专门针对联机交易处理系统&#xff08;OLTP系统&#xff09;的规范&#xff0c;一般情况下我们也把这类系统称为业务处理系统。 Tpcc-mysql是percona基于TPC-C(下面简写成TPCC)衍生出来的产品&#xff0c;专用于MySQL基准测试。其源码放在launchpad上&#xff0c…

sql 行转列 日周月 图表统计

目录 目录 需求 准备 月 分析 按月分组 行转列 错误版本 正确版本 日 分析 行转列 周 分析 按周分组 行转列 本年 需求 页面有三个按钮 日周月&#xff0c;统计一周中每天(日)&#xff0c;一月中每周(周)&#xff0c;一年中每月(月)&#xff0c;设备台数 点…

8-小程序数据promise化、共享、分包

小程序API Promise化 wx.requet 官网入口 默认情况下&#xff0c;小程序官方异步API都是基于回调函数实现的 wx.request({method: , url: , data: {},header: {content-type: application/json // 默认值},success (res) {console.log(res.data)},fail () {},complete () { }…

Maven命令运行单元测试

使用idea开发多模块项目时,有时别的模块编译不通过会导致不能运行单元测试,这是我们可以使用maven命令来运行单元测试 格式 mvn -DtestDingTalkTest#getAllUsers 命令说明 mvn -Dtest 固定格式 DingTalkTest 单元测试类名 getAllUsers 单元测试方法 单元测试类和单元测试方法…

MySQL--选择数据库(3)

在你连接到 MySQL 数据库后&#xff0c;可能有多个可以操作的数据库&#xff0c;所以你需要选择你要操作的数据库。 从命令提示窗口中选择 MySQL 数据库 在 mysql> 提示窗口中可以很简单的选择特定的数据库。 在 MySQL 中&#xff0c;要选择要使用的数据库&#xff0c;可…

六、Kotlin 类型进阶

1. 类的构造器 & init 代码块 1.1 主构造器 & 副构造器在使用时的注意事项 & 注解 JvmOverloads 推荐在类定义时为类提供一个主构造器&#xff1b; 在为类提供了主构造器的情况下&#xff0c;当再定义其他的副构造器时&#xff0c;要求副构造器必须调用到主构造器…

洛谷C++简单题练习day6—P1830 城市轰炸

day6--P1830 城市轰炸--1.26 习题概述 题目背景 一个大小为 nm 的城市遭到了 x 次轰炸&#xff0c;每次都炸了一个每条边都与边界平行的矩形。 题目描述 在轰炸后&#xff0c;有 y 个关键点&#xff0c;指挥官想知道&#xff0c;它们有没有受到过轰炸&#xff0c;如果有&a…

三件套之三,完美句号,下期有惊喜……

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; CAXA CAD电子图板2024是一款强大的二维CAD绘图软件&#xff0c;它具有易学易用、稳定高效和性能优越等特点。使用这款软件&#xff0c;用户不仅可以更…

Python网络爬虫实战——实验6:Python实现js逆向与加解密

【实验内容】 本实验主要介绍在数据采集过程中对js代码进行分析从而对加密字段进行解密。 【实验目的】 1、理解js逆向工程的概念 2、学会逆向工程中的加解密分析 【实验步骤】 步骤1 理解js逆向工程的概念 步骤2 学会逆向工程中的加解密分析 步骤3 采集广东政府采购网 步…

Jmeter接口测试-websocket测试

壹 Jmeter接口测试-websocket测试 测试之前的准备工作,需要websocket插件 方式一: 去github下载: https://github.com/maciejzaleski/JMeter-WebSocketSampler/wiki/Dependencies jetty-http-9.1.2.v20140210.jarjetty-io-9.1.2.v20140210.jarjetty-util-9.1.2.v20140210…

真香一个团队协作工具部署

部署 version: "3.4"services:mongo:image: mongocontainer_name: twake-dbvolumes:- /opt/Twake/data:/data/dbnode:image: twaketech/twake-node:latestcontainer_name: twake-webports:- 3345:3000# - 8000:3000environment:- DEVproduction- SEARCH_DRIVERmong…

IndexedDB

Web SQL Database | Can I use... Support tables for HTML5, CSS3, etc IndexedDB | Can I use... Support tables for HTML5, CSS3, etc 为什么websql被废弃&#xff1f;_笔记大全_设计学院 WebSQL有兼容、性能、安全问题&#xff0c;要考虑使用IndexedDB替代。 一文看懂 In…

幻兽帕鲁搭建私服,一键更新方法

看着帕鲁这么火&#xff0c;估计更新会变为常态了&#xff0c;如果有自己搭建私服的话&#xff0c;跟着我下面的方法去进行更新吧&#xff01; 如果你还没有自己的私服&#xff0c;快去三五十搞一个吧&#xff0c;只需三五分钟&#xff0c;叫上你的小伙伴一起去搞起来吧 只需3分…

【自然语言处理的发展】

自然语言处理的发展 自然语言处理&#xff08;NLP&#xff09;作为人工智能领域的一个分支&#xff0c;旨在让计算机理解和生成人类语言。随着深度学习和大数据技术的不断进步&#xff0c;NLP在近年来取得了显著的突破。本文将探讨NLP技术的发展历程、最新技术进展以及未来展望…

如何在Shopee平台上进行宠物类目的选品丨shopee宠物选品

在Shopee平台上进行宠物类目的选品是一个重要的任务&#xff0c;它直接关系到卖家的销售业绩和市场竞争力。为了成功选择适合的宠物用品&#xff0c;在选品过程中&#xff0c;卖家可以遵循以下策略&#xff1a; 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#…

vue3项目中使用Arco Design-Table组件结合h()函数生成表格嵌套表格效果

vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。 示例效果如下&#xff1a; 【方式一】 给Table组件设置表格的“展开行配置”参数&#xff1a;expandable <a-table :expandable"expandable"></a-t…

ZYNQ程序固化

文章目录 一、简介二、固化操作2.1 生成固化文件2.2 固化到SD卡2.3 固化到Flash 参考 将程序存储在非易失性存储器中&#xff0c;在上电或者复位时让程序自动加载运行。 这个过程需要启动引导程序( Boot Loader)参与&#xff0c;Boot Loader会加载FPGA配置文件&#xff0c;以及…

【异常收集】IDEA启动项目遇到的异常汇总,包括插件异常,版本依赖异常,启动异常等以及对应的解决办法

该文章旨在记录开发中遇到的一些异常&#xff0c;以供遇到似错误进行参考修改 一、项目在多个环境下切换&#xff0c;有一次启动后编译失败&#xff0c;报异常 背景&#xff1a;项目在不同环境下有对应的分支&#xff0c;切换分支后运行项目&#xff0c;报错如下 错误:Kotlin:…