element 树形 el-tree 修改小三角箭头图标CSS

作者:神秘网友 发布时间:2021-03-11 11:50:06

element 树形 el-tree 修改小三角箭头图标CSS

可根据需要添加/deep/ ::v-deep 等权重

.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

//有子节点 且未展开
.el-tree .el-icon-caret-right:before {
  background: url('~@/assets/tree/add.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('~@/assets/tree/minus.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: #fff;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

element 树形 el-tree 修改小三角箭头图标CSS 相关文章

  1. vue使用Element隐藏侧边栏进度条

    遇到的问题:当展开侧边栏的时候,如果超出高度,会出现进度条,并且会挤开右边的区域 解决方法: 可以用element-ui 里的一个组件 ,文档里面没有说明; el-scrollbar/el-scrollbar 把需要滚动的内容放在这个标签里 加上个height 就是滚动区域的高 : templat

  2. element ui日期选择器只能选择一年之内的数据

    html代码 el-date-picker v-model="sysFnClkFrqForm.date" :picker-options="pickerOptions" type="daterange" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" /

  3. element 的 Notification 通知,自定义内容

    需要实现的效果: 通知事件: // 商户后台通知MerchantBackgroundNotice() { // 禁止消息通知弹出多条 if(this.notifyInstance) { this.notifyInstance.close(); }const h = this.$createElement; // 创建文本节点 this.notifyInstance = this.$notify({ sho

  4. ElementUI 分页+django rest framework

    一、概述 在之前的文章中,链接如下:https://www.cnblogs.com/xiao987334176/p/14313471.html 介绍了ElementUI 分页,前端请求一次接口,获取所有数据,由ElementUI 分页组件实现分页,也就是说由前端来完成了分页功能。 但是,在实际项目中,不可能一次性

  5. 递归生成树形分级菜单或列表

    三级分类for循环(只能三级分类,逻辑看的有点晕) //查询所有分类 ListSugClassificationParam queryAllList = counterQueryAllclsMapper.queryAllList(); // 组装分类 ListSugClassificationParam returnList = new ArrayList(); // 2.2 提供Map进行缓存,

  6. 如何给element-ui table的数据增加悬浮提示

    场景:要使表格中的数据文字不换行,鼠标放上去就显示数据内容,就像那种tip提示。该怎么实现呢 只需加个属性就能实现,没错就是这么简单,就让我们一起来看看吧! 先来看看效果图吧: 这里我们用到 show-overflow-tooltip 属性,官方解释:默认情况下若内容

  7. 如何给element-ui的表头增加悬浮提示

    场景:要使表格中的表头文字不换行,鼠标放上去就显示表头内容,就像那种tip提示。该怎么实现呢恰好这两个element都提供了,就让我们一起来看看吧! 先来看看效果图吧: 1、首先我们可以设置超出让文本省略号显示(根据需求而定), 注意:要设给表格的.cell

  8. 2 :事件处理

    知识梳理 //1 单个注册事件 element.click(function(){});//2 事件绑定 element.on({可以绑定多个事件});//3 解绑事件 element.off();//4 自动触发事件 element.trigger(); 一 绑定事件 on() 优势 //1 可以绑定多个事件//2 可以事件委托//3 1)语法 element.

  9. 手把手教学~基于element封装tree树状下拉框

    1.组件调用代码 template div id="app" h1{{`基于Element-UI组件改造的树形选择器`}}:/h1 !-- 调用树形下拉框组件 -- !-- 下拉树 -- selectbutton :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion

  10. element下拉树封装el-select el-tree

    1.组件调用代码 template div id="app" h1{{`基于Element-UI组件改造的树形选择器`}}:/h1 !-- 调用树形下拉框组件 -- !-- 下拉树 -- selectbutton :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词