ElementUI 自定义 Tree 树形控件背景

news2024/11/16 19:50:54

在 template 中

<div class="container">
  <el-tree :data="treeList" :props="defaultProps" accordion @node-click="handleNodeClick" />
</div>

在 script 中

treeList: [
  { id: "-1", label: "区域选择" },
  { id: "0", label: "全市" },
  {
    id: "1",
    label: "南明区",
    children: [{ id: "1-1", label: "花果园" }]
  },
  {
    id: "2",
    label: "观山湖区",
    children: [
      { id: "2-1", label: "长岭街道办" },
      { id: "2-2", label: "金阳街道办" },
      { id: "2-3", label: "金华镇" },
      { id: "2-4", label: "金华园街道办" }
    ]
  }
],
defaultProps: { children: "children", label: "label" }
handleNodeClick(e) {
  console.log(e.id);
}

在 style 中

.container {
  width: 200px;
}
.el-tree-node__content {
  padding: 5px 0;
  border: 1px solid #ebf0f3;
}
.el-tree-node.is-current > .el-tree-node__content .el-tree-node__expand-icon {
  color: #0c5cff;
}
.el-tree-node__content:hover {
  color: #0c5cff;
  background: #e0eaff;
}
.el-tree-node.is-current > .el-tree-node__content {
  color: #0c5cff;
  background-color: #e0eaff;
}
.el-tree-node__expand-icon.is-leaf {
  color: transparent !important;
}

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

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

相关文章

视频剪辑技巧:如何使用背景图片增强视频的画中画效果

在视频剪辑中&#xff0c;背景图片的运用可以极大地增强视频的视觉效果&#xff0c;尤其是画中画效果的呈现。本文介绍如何使用云炫AI智剪将背景图片批量制作画中画视频的实用剪辑技巧。未来随着技术的不断发展和创新&#xff0c;我们可以期待更多富有创意的视频作品出现。同时…

Vue 事件绑定 和 修饰符

目录 一、事件绑定 1.简介 : 2.实例 : 二、修饰符 1.简介 : 2.实例 : 3.扩展 : 一、事件绑定 1.简介 : (1) 在Vue中&#xff0c;通过"v-on:事件名"可以绑定事件&#xff0c;eg : v-on:click表示绑定点击事件。 (2) 触发事件时调用的方法&#xff0c;定义在Vu…

linux安装apache并配置userid站点

目录 一、linux安装apache的方式 1、安装wget 2、下载CentOS 7的repo文件 3、更新镜像源 二、安装apache 1.通过命令直接安装apache(linux的软件包为httpd) 2.启动httpd服务 3.访问一下 三、apache配置文件 1.主配置文件 2.修改根目录 3.修改下端口 4.apache的工作…

【完整代码文章】2023粤港澳金融数学建模B题代码文章

基于中国特色估值体系的股票模型分析和投资策略 完整的文章和代码都已经给到 摘要 中国特色估值体系的主要特色和核心内涵是政策导向。2022年下半年&#xff0c;证监会党委书记、主席易会满在《求是》杂志发表文章提出&#xff0c;努力建设中国特色现代资本市场。在2022年11…

UE5加载websocket模块为空

今天测试UE 发现工程启动不了&#xff0c;后来看到原来是websocket模块无法加载。 解决的它的方法很简单&#xff0c;这种问题一般会出现在源码版本的引擎或者是停电了&#xff0c;导致UElaunch版本损坏&#xff0c;解决方法是来到源码版本的引擎 这个目录下&#xff1a; D:\…

凸包问题——分治法 Python实现

凸包问题。给定平面上n个点&#xff0c;从中找出一个最小点集&#xff0c;使得该点集所组成的凸多边形包围所有的n个点。基于分治策略&#xff0c;设计一个求解凸包问题的算法。实现该算法并测试。 分治算法思路&#xff1a; 如果点集中的点数小于等于3&#xff0c;可以直接返…

管理类联考——数学——汇总篇——知识点突破——代数——函数、方程——记忆

文章目录 考点记忆/考点汇总——按大纲 整体局部 本篇思路&#xff1a;根据各方的资料&#xff0c;比如名师的资料&#xff0c;按大纲或者其他方式&#xff0c;收集/汇总考点&#xff0c;即需记忆点&#xff0c;在通过整体的记忆法&#xff0c;比如整体信息很多&#xff0c;通常…

hdlbits系列verilog解答(always块if语句)-31

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 if 语句通常创建一个 2 对 1 多路复用器,如果条件为 true,则选择一个输入,如果条件为 false,则选择另一个输入。 always @(*) begin if (condition) begin out = x; end else begin out = y; end end 这等…

【算法专题】双指针—有效三角形的个数

一、题目解析 题目链接&#xff1a;有效三角形的个数 我们知道想要组成一个三角形那么其任意两边之和必定大于第三边&#xff0c;即 但是如果我们知道这三条边的大小顺序&#xff0c;那么只需判断一次即可&#xff0c;假设c是最大的那条边&#xff0c;那么不等式②和③不用判断…

Rust编程基础之函数和表达式

1.Rust函数 在之前的文章中,我们已经见到了一个函数:main函数, 它是很多程序的入口点。也见过 fn 关键字&#xff0c;它用来声明新函数。 Rust 代码中的函数和变量名使用 snake case 规范风格。在 snake case 中&#xff0c;所有字母都是小写并使用下划线分隔单词。这是一个包…

LEEDCODE 709转换成小写字母

class Solution { public:string toLowerCase(string s) {int len s.length();string a "";for(int i 0; i < len; i){if(s[i] > 65 && s[i] < 90){a (s[i] 32);}elsea s[i];}// cout<<a<<endl;return a;} };

行业追踪,2023-11-02

自动复盘 2023-11-02 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

Amazon Generative AI 新世界 | 基于 Amazon 扩散模型原理的代码实践之采样篇

以前通过论文介绍 Amazon 生成式 AI 和大语言模型&#xff08;LLMs&#xff09;的主要原理之外&#xff0c;在代码实践环节主要还是局限于是引入预训练模型、在预训练模型基础上做微调、使用 API 等等。很多开发人员觉得还不过瘾&#xff0c;希望内容可以更加深入。因此&#x…

uniapp循环对象列表---点击列表切换选中不同状态

目录 源码图片最后 源码 <template><view><ul><li v-for"(item, index) in list" click"toggleSelection(index)" :class"{selected: selectedIndex index}">{{ item }}<view :class"{selected: selectedInde…

系列五、映射文件xxxMapper.xml

一、概述 mapper映射文件是mybatis中最重要的部分&#xff0c;涉及到的细节也非常多。 1.1、parameterType 表示输入参数的类型。例如&#xff1a; <select id"getUserById" parameterType"integer" resultType"org.star.entity.model.UserDO&…

Mysql数据库基础知识补充

sql知识补充 一.数据库的操作1.显示当前数据库2.创建数据库3.使用数据库4.删除数据库 二.常用数据类型1.数值类型2.字符串类型3.日期类型 三.表的操作1.查看表结构2.创建表3.删除表 一.数据库的操作 1.显示当前数据库 2.创建数据库 3.使用数据库 4.删除数据库 二.常用数据类型…

netty实战-手写通信框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b; 提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反序…

轻松部署Swagger Editor:安装Docker并实现远程访问编辑API文档

文章目录 Swagger Editor本地接口文档公网远程访问1. 部署Swagger Editor2. Linux安装Cpolar3. 配置Swagger Editor公网地址4. 远程访问Swagger Editor5. 固定Swagger Editor公网地址 Swagger Editor本地接口文档公网远程访问 Swagger Editor是一个用于编写OpenAPI规范的开源编…

Java算法:选择排序

一、选择排序 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的 排序算法 。 工作原理&#xff1a;第一次从待排序的 数据元素 中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后再从剩余的未排序元素中寻…

Android Snackbar

1.Snackbar Snackbar是Material Design中的一个控件&#xff0c;用来代替Toast。Snackbar是一个类似Toast的快速弹出消息提示的控件。Snackbar在显示上比Toast丰富&#xff0c;而且提供了用户交互的接口。 ①默认情况下&#xff0c;Snackbar显示在屏幕底部&#xff0c;它出现…