实现效果:

html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="iview.css" rel="stylesheet" />
<style>
#app {
padding: 32px;
}
.demo-tree-render .ivu-tree-title {
width: 100%;
}
.ivu-poptip-inner {
opacity: 0.7;
background-color: #000;
color: #fff;
}
.ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow:after {
border-bottom-color: #000;
opacity: 0.7;
}
.ivu-poptip-popper[x-placement^=bottom] .ivu-poptip-arrow {
top: 2px;
}
.ivu-poptip-popper[x-placement^=top] .ivu-poptip-arrow:after {
border-top-color: #000;
opacity: 0.7;
}
.ivu-poptip-popper[x-placement^=top] .ivu-poptip-arrow {
bottom: 2px;
}
.treePoptipClass {
min-width: 100px;
}
.ivu-poptip-body-content-word-wrap {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<tree :data="data5" :render="renderContent" class="demo-tree-render" @on-check-change="treeCheck" show-checkbox></tree>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script src="iview.min.js"></script>
<script src="test.js"></script>
js代码:
var Main = {
data() {
return {
data5: [
{
title: 'parent-1',
expand: true,
children: [
{
title: 'child 1-1',
expand: true,
children: [
{
title: 'leaf 1-1-1',
expand: true
},
{
title: 'leaf 1-1-2',
expand: true
}
]
},
{
title: 'child 1-2',
expand: true,
children: [
{
title: 'leaf 1-2-1',
expand: true
},
{
title: 'leaf 1-2-1',
expand: true
}
]
}
]
}
],
buttonProps: {
type: 'default',
size: 'small',
}
}
},
methods: {
renderContent(h, { root, node, data }) {
return h('poptip', {
props: {
trigger: 'hover',
'popper-class': 'treePoptipClass',
placement: 'top',
transfer: true,
'word-wrap': true,
}
}, [
h('span', data.title),
h('span', {
slot: 'content'
}, data.title)
])
},
treeCheck(thisCheckData, item) {
console.log('当前选中项:', item);
console.log('选中的数组:', thisCheckData);
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')
查看效果:

资源下载地址:https://download.csdn.net/download/huqngqing/35389694
该博客展示了如何使用HTML、CSS和JavaScript实现一个具有自定义样式和事件处理的树形组件。通过引入iView库,实现了节点的悬停提示,调整了提示框的样式和位置,并提供了在节点选择时触发的on-check-change事件处理函数,打印当前选中项和选中数组。示例代码包括HTML结构、CSS样式和JavaScript逻辑,以及用于测试的数据结构。
908

被折叠的 条评论
为什么被折叠?



