《ElementUI/Plus 基础知识》el-tree 之修改可拖拽节点的高亮背景和线

前言

收到需求,PM 觉得可拖拽节点的高亮背景和线样式不明显!CSS 样式得改!
注意:下述方式适用于ElementUI el-tree 和 ElementPlus el-tree!

修改

拖拽被叠加节点的背景色和文字

  • 关键类名 is-drop-inner
.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color: red;color: yellow;
}
  • 修改效果:如图所示,被叠加的高亮节点为蓝底白字
    在这里插入图片描述
  • 修改效果:如图所示,被叠加的高亮节点为红底黄字
    在这里插入图片描述

拖拽插入节点之间的高亮线

  • 关键类名 el-tree__drop-indicator
.el-tree__drop-indicator {height: 3px;background-color: red;
}
  • 修改效果:如图所示,高亮线为高1px ,蓝色
    在这里插入图片描述

  • 修改效果:如图所示,高亮线为高3px ,红色
    在这里插入图片描述

完整代码

<template><el-tree:data="data"show-checkboxdraggablenode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]"></el-tree>
</template>
<script>export default {data() {return {data: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',disabled: true}]}, {id: 2,label: '二级 2-2',disabled: true,children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',disabled: true}]}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>
<style>
// 拖拽时,被叠加节点的背景色和文字
.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color: red;color: yellow;
}
// 拖拽时,插入节点之间的高亮线
.el-tree__drop-indicator {height: 3px;background-color: red;
}
</style>

最后

ElementUI el-tree 和 ElementPlus el-tree 皆可用~

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

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

相关文章

汽车零部件制造企业MES系统主要功能介绍

随着汽车工业的不断发展&#xff0c;汽车零部件制造企业面临着越来越高的生产效率、质量控制和成本管理要求。MES系统作为一种综合信息系统&#xff0c;能够帮助企业实现从订单接收到产品交付的全流程数字化管理&#xff0c;优化资源配置&#xff0c;提高生产效率&#xff0c;确…

Java中消耗掉换行符

scanner.nextLine(); // 消耗掉换行符 这行代码的作用是读取并丢弃输入流中的换行符。这是因为在使用 Scanner 对象读取用户输入时&#xff0c;有时候会在输入流中留下未处理的换行符&#xff0c;这可能会导致后续的输入读取出现问题。 具体来说&#xff0c;当你使用 Scanner …

vue2学习笔记7 - Vue中的MVVM模型

MVVM Model-View-viewModel是一种软件架构模式&#xff0c;用于将用户界面&#xff08;View&#xff09;与业务逻辑&#xff08;Model&#xff09;分离&#xff0c;并通过ViewModel进行连接和协调。MVVM模式的目标是实现视图与模型的解耦&#xff0c;提高代码的可读性、可维护…

django报错(一):python manage.py makemigrations,显示“No changes detected”

执行python manage.py makemigrations命令无任何文件生成&#xff0c;结果显示“No changes detected”。 解决方案一&#xff1a; 1、执行命令&#xff1a;python manage.py makemigrations –empty appname 2、删除其中的0001_initial.py文件&#xff08;因为这个文件内容是…

深度解析:disableHostCheck: true引发的安全迷局与解决之道

在Web开发的浩瀚星空中&#xff0c;开发者们时常会遇到各种配置与调优的挑战&#xff0c;其中disableHostCheck: true这一选项&#xff0c;在提升开发效率的同时&#xff0c;也悄然埋下了安全隐患的伏笔。本文将深入探讨这一配置背后的原理、为何会引发报错&#xff0c;以及如何…

Maven学习—如何在IDEA中配置Maven?又如何创建Maven工程?(详细攻略)

目录 前言 1.在IDEA中配置Maven 2.创建Maven项目 &#xff08;1&#xff09;Maven&#xff1a;创建普通Maven工程 &#xff08;2&#xff09;Maven Archetype&#xff1a;创建Maven模板工程 前言 本篇博客将详细的介绍在IDEA中如何配置Maven&#xff0c;以及如何创建一个Ma…

鸿蒙特色物联网实训室

一、 引言 在当今这个万物皆可连网的时代&#xff0c;物联网&#xff08;IoT&#xff09;正以前所未有的速度改变着我们的生活和工作方式。它如同一座桥梁&#xff0c;将实体世界与虚拟空间紧密相连&#xff0c;让数据成为驱动决策和创新的关键力量。随着物联网技术的不断成熟…

关于 Docker Registry (镜像仓库)

什么是镜像仓库 概念 镜像仓库&#xff08;Docker Registry&#xff09;负责存储、管理和分发镜像&#xff0c;并提供了登录认证能力&#xff0c;建立了仓库的索引。 镜像仓库管理多个 Repository&#xff0c;Repository 通过命名来区分。每个 Repository 包含一个或多个镜像…

WAF基础介绍

WAF 一、WAF是什么&#xff1f;WAF能够做什么 二 waf的部署三、WAF的工作原理 一、WAF是什么&#xff1f; WAF的全称是&#xff08;Web Application Firewall&#xff09;即Web应用防火墙&#xff0c;简称WAF。 国际上公认的一种说法是&#xff1a;Web应用防火墙是通过执行一…

[Labview] 表格单元格外边框 二维图片叠加绘图

最终效果如下所示 转行做Labview都没到三个月&#xff0c;主程居然让我做这么复杂的功能&#xff0c;真是看得起我/(ㄒoㄒ)/~~ 思路大致分为两步 1、确定每个框体的左上/右下单元格位置&#xff0c;转换为表格表格坐标并在二维图片上绘制生成&#xff1b; 2、为二维图片添加…

cuda缓存示意图

一、定义 cuda 缓存示意图gpu 架构示意图gpu 内存访问示意图 二、实现 cuda 缓存示意图 DRAM: 通常指的是GPU的显存&#xff0c;位于GPU芯片外部&#xff0c;通过某种接口&#xff08;如PCIE&#xff09;与GPU芯片相连。它是GPU访问的主要数据存储区域&#xff0c;用于存储大…

MBR40150FCT-ASEMI无人机专用MBR40150FCT

编辑&#xff1a;ll MBR40150FCT-ASEMI无人机专用MBR40150FCT 型号&#xff1a;MBR40150FCT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 批号&#xff1a;最新 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;40A 最大循环峰值反向电压&#xff08;VRRM&a…

shell的变量及赋值

文章目录 一&#xff0c;shell变量是什么二&#xff0c;自定义变量1 . 查看和引用变量的值2 . echo选项3 . unset4 . 特殊符号5 . 括号 三&#xff0c;交互式定义变量1 . read2 . read 选项 四&#xff0c;变量的范围1 . export命令 五&#xff0c;数值变量的运算及特殊变量1 .…

鸿蒙Harmony--文本组件Text属性详解

金樽清酒斗十千&#xff0c;玉盘珍羞直万钱。 停杯投箸不能食&#xff0c;拔剑四顾心茫然。 欲渡黄河冰塞川&#xff0c;将登太行雪满山。 闲来垂钓碧溪上&#xff0c;忽复乘舟梦日边。 行路难&#xff0c;行路难&#xff0c;多歧路&#xff0c;今安在&#xff1f; 长风破浪会有…

浅析stm32启动文件

浅析stm32启动文件 文章目录 浅析stm32启动文件1.什么是启动文件&#xff1f;2.启动文件的命名规则3.stm32芯片的命名规则 1.什么是启动文件&#xff1f; 我们来看gpt给出的答案&#xff1a; STM32的启动文件是一个关键的汇编语言源文件&#xff0c;它负责在微控制器上电或复位…

探索数据结构与算法的奇妙世界 —— Github开源项目推荐《Hello 算法》

在浩瀚的编程与计算机科学领域中&#xff0c;数据结构与算法无疑是每位开发者攀登技术高峰的必经之路。然而&#xff0c;对于初学者而言&#xff0c;这条路往往布满了荆棘与挑战。幸运的是&#xff0c;今天我要向大家推荐一个令人振奋的项目——《Hello Algo》&#xff0c;它正…

在 Vue3 + Electron 中使用预加载脚本(preload)

文章目录 一、什么是预加载脚本(preload)&#xff0c;为什么我们需要它二、通过预加载脚本暴露相关 API 至渲染进程1、实现获取系统默认桌面路径功能2、向剪切板写入内容3、使用系统默认浏览器访问目标 url4、使用文件选择对话框 三、参考资料 一、什么是预加载脚本(preload)&a…

负载测试和功率分析中负载箱的重要作用

在负载测试和功率分析中&#xff0c;负载箱扮演着至关重要的角色。以下是负载箱在这两个方面的重要作用&#xff1a; 一、负载测试中的重要作用 模拟实际负载条件&#xff1a; 负载箱能够模拟各种复杂的负载条件&#xff0c;包括电阻性负载、电感性负载、电容性负载等&#x…

【HarmonyOS开发】弹窗交互(promptAction )

实现效果 点击按钮实现不同方式的弹窗showToast showDialog showActionMenu 代码实现 1.引入’ohos.promptAction’ import promptAction from ohos.promptAction;2.通过promptAction 实现系统既定的弹窗 import promptAction from ohos.promptAction;Entry Component st…

Spring-Spring、IoC、DI、注解开发

1、Spring是什么 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器(框架)。 Spring整体架构 Spring优点&#xff1a; Spring属于低侵入设计。IOC将对象之间的依赖关系交给Spring,降低组件之间的耦合&#xff0c;实现各个层之间的解耦&#xff0c;让我们更专注于业务…