详解树状结构图 vue-org-tree

2023-02-18 22:06:01html-css093

详解树状结构图 vue-org-tree,第1张

温馨提示：不安装less-loader基本上都会报错

严老湿这边呢，就直接使用 Vue-cli 起步了， vue-org-tree 安装成功之后，我们就直接使用了，在 Vue 页面或者组件中使用 vue2-org-tree 标签，动态绑定data

data数据放入页面中

id 每个元素不同的ID ，label为name， children为自己的子集数据

效果图：

刚刚我们看到的是默认排列方式，其实还有一种排列方式，我们一起来看看

horizontal 是水平排列方式，我们来实践一下吧，它的参数是 true 、 false

看看效果如何：

使用 label-class-name 我们还可以动态绑定自定义 class

我们一起来尝试一下吧！

js:

css：

看看效果图

折叠展示效果

折叠效果是有了，那么怎么展开呢？

js:

请看效果图：

问题又来了，默认展开如何实现？

请看大屏幕

在请求完数据之后直接调用,或者生命周期调用，可以自由发挥

第一个参数是你的资源data，第二个参数是全部展开或否

上效果图：

vue2-org-tree 向我们抛出了几个事件，我们先看看有哪些事件

on-node-click 就是被抛出的点击事件

我们在方法里面写一个NodeClick用来接受点击触发的值

打印结果：

它还向我们抛出了移入移出事件，返回值与点击事件大致相同

来了老弟？我们做移入移出，肯定是要有功能的对不对？

每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容

js:

css:

上效果图：

propdescriptontypedefaultdata

Object

propsconfigure props

Object

{label: 'label', children: 'children', expand: 'expand'}

labelWidthnode label width

String

Number

auto

collapsablechildren node is collapsable

Boolean

true

renderContenthow to render node label

Function

-labelClassNamenode label class

Function

String

-selectedKeyThe key of the selected node

String

-selectedClassNameThe className of the selected node

Function

String

event namedescriptontypeclickClick event

Function

mouseoveronMouseOver event

Function

mouseoutonMouseOut event

Function

鼠标点击时调用它。

params e Event

params data Current node data

well be called when the node-label clicked

params e Event

params data Current node data

当鼠标悬停时调用它。

params e Event

params data Current node data

当鼠标离开时调用它。

params e Event

params data Current node data

最后附上Git地址：https://github.com/CrazyMrYan/vue2-org-tree

预览地址：http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree

关注“悲伤日记”更多精彩文章

只是静态展示效果的话，HTML里的ul标签搭配一些CSS代码就能实现，如果想实现动态交互，例如点击展开、折叠文件夹的话，需要使用JS，当然，有专门的插件可以实现，例如：zTree，官网：http://www.treejs.cn

这个可能就要用到js了，你可以去懒人图库里面找找，这个是树型选卡特效

.mainDiv

{

width:160px

}

.topItem

{

width:160px

height:22px

cursor:pointer

background: #467BF2

text-decoration: none

color: white

font-weight:bold

font-family:"GOTHIC"

}

.dropMenu

{

background:#D9D9D9

border-top:1px solid #467BF2

border-left:1px solid #92B1F8

border-right:1px solid #92B1F8

border-bottom:1px solid #92B1F8

}

.subMenu

{

display:none

}

.subItem

{

padding-left:5px

cursor:pointer

font-weight:bold

text-decoration:none

color:black

}

.subItem a

{

text-decoration:none

color:black

}

.subItemOver

{

cursor:pointer

color:blue

text-decoration:underline

font-weight:bold

padding-left:5px

}

.subItemOver a

{

color:blue

}

.drop

{

border-left:1px solid black

border-right:1px solid black

}

</style>

var TIMER_SLIDE = null

var OBJ_SLIDE

var OBJ_VIEW

var PIX_SLIDE = 10//this is the amount of slide/DELAY_SLIDE

var NEW_PIX_VAL

var DELAY_SLIDE = 30//this is the time between each call to slide

var DIV_HEIGHT = 22//value irrelevant

var SUB_MENU_NUM =0

var RE_INIT_OBJ = null

var bMenu = document.getElementById("curMenu")

var MainDiv,SubDiv

//DD added code

document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hiddenposition: absolute"></div>')

function Init(objDiv)

{

if (TIMER_SLIDE == null)

{

SUB_MENU_NUM = 0

MainDiv = objDiv.parentNode

SubDiv = MainDiv.getElementsByTagName("DIV").item(0)

SubDiv.onclick = SetSlide

OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)

OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0)

document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code

DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code

for (i=0i<OBJ_VIEW.childNodes.lengthi++)

{

if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")

{

SUB_MENU_NUM ++

OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle

OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle

}

NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"))

}

function SetSlide()

{

if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code

if (TIMER_SLIDE == null &&this.parentNode == MainDiv)

TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE)

else

{

RE_INIT_OBJ = this

setTimeout('ReInit()', 200)

}

function ReInit(obj)

{

Init(RE_INIT_OBJ)

TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE)

RE_INIT_OBJ = null

}

function RunSlide()

{

if (OBJ_VIEW.getAttribute("state") == 0)

{

NEW_PIX_VAL += PIX_SLIDE

OBJ_SLIDE.style.height = NEW_PIX_VAL

if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code

{

clearInterval(TIMER_SLIDE)

TIMER_SLIDE = null

OBJ_VIEW.style.display = 'inline'

OBJ_VIEW.setAttribute("state","1")

MainDiv.setAttribute("state",NEW_PIX_VAL)

}

} else

{

OBJ_VIEW.style.display = 'none'

NEW_PIX_VAL -= PIX_SLIDE

if(NEW_PIX_VAL >0)OBJ_SLIDE.style.height = NEW_PIX_VAL

if (NEW_PIX_VAL <= 0)

{

NEW_PIX_VAL = 0

OBJ_SLIDE.style.height = NEW_PIX_VAL

clearInterval(TIMER_SLIDE)

TIMER_SLIDE = null

OBJ_VIEW.setAttribute("state","0")

MainDiv.setAttribute("state",NEW_PIX_VAL)

}

function ChangeStyle()

{

if (this.className == this.getAttribute("classOut"))

this.className = this.getAttribute("classOver")

else

this.className = this.getAttribute("classOut")

}

</script>

</div>

<BR />

</div>

<BR />

</div>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑重装系统有哪些方法

# 下一篇：电脑的内存的大小主要影响什么？

推荐阅读

热门文章

最新发布

标签列表

详解树状结构图 vue-org-tree

给您推荐相同类型的内容：