使用vue2-org-tree html demo和问题

最新推荐文章于 2024-04-09 10:27:34 发布

一个钝角

最新推荐文章于 2024-04-09 10:27:34 发布

阅读量1k

点赞数

文章标签： vue.js html5

本文链接：https://blog.csdn.net/weixin_43859180/article/details/111587343

版权

使用vue2-org-tree html demo和问题

想让每次点击展示的子层显示不同颜色，用css选择器修改笨笨的不灵活，看出来节点是有规律的，而且点击选中也不起作用了，修改整体颜色也不起作用了，有没有好方法改，烦躁ing
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-org-tree</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/vue2-org-tree/dist/style.css">
    <style type="text/css">
    .org-tree-node-label {
      white-space: nowrap;
    }
    .bg-white {
      background-color: white;
    }
    .bg-orange {
      background-color: orange;
    }
    .bg-gold {
      background-color: gold;
    }
    .bg-gray {
      background-color: gray;
    }
    .bg-lightpink {
      background-color: lightpink;
    }
    .bg-chocolate {
      background-color: chocolate;
    }
    .bg-tomato {
      background-color: tomato;
    }
    .clickable-node {
      cursor: pointer;
    }
	
	/* 1 */
	.org-tree-node>.org-tree-node-label>.org-tree-node-label-inner{
		background-color:#55b9da;
	}
	/* 2 */
	.org-tree-node-children>.org-tree-node>.org-tree-node-label>.org-tree-node-label-inner{
		background-color:#83af9b;
	}
	
	/* 3 */
	.org-tree-node-children>.org-tree-node>.org-tree-node-children>.org-tree-node>.org-tree-node-label>.org-tree-node-label-inner{
		background-color:#c8c8a9;
	}
	/* 4 */
	.org-tree-node-children>.org-tree-node>.org-tree-node-children>.org-tree-node>
	.org-tree-node-children>.org-tree-node>
	.org-tree-node-label>.org-tree-node-label-inner{
		background-color:#f9cdad; 
	}
	/* 第5层 */
	.org-tree-node-children>.org-tree-node>.org-tree-node-children>.org-tree-node>
	.org-tree-node-children>.org-tree-node >
	.org-tree-node-children>.org-tree-node>
	.org-tree-node-label>.org-tree-node-label-inner{
		background-color:#fc9d9a;

最低0.47元/天解锁文章

一个钝角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用vue2-org-tree html demo和问题

使用vue2-org-tree html demo和问题想让每次点击展示的子层显示不同颜色，用css选择器修改笨笨的不灵活，看出来节点是有规律的，而且点击选中也不起作用了，修改整体颜色也不起作用了，有没有好方法改，烦躁ing<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>vue-org-tree</title> &
复制链接

扫一扫