<template>
<Tree :data="data" :render="renderContent" class="demo-tree-render"></Tree>
</template>
<script>
import { resolveComponent } from 'vue'
export default {
data () {
return {
data: [
{
title: 'parent 1',
expand: true,
render: (h, { root, node, data }) => {
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h(resolveComponent('Icon'), {
type: 'ios-folder-outline',
style: {
marginRight: '8px'
}
}),
h('span', data.title +'(59/62)')
]),
]);
},
children: [
{
title: 'child 1-1',
expand: true,
levle:2,
children: [
{
title: 'leaf 1-1-1',
expand: true,
levle:3
},
{
title: 'leaf 1-1-2',
expand: true,
levle:3
}
]
},
{
title: 'child 1-2',
expand: true,
levle:2,
children: [
{
title: 'leaf 1-2-1',
expand: true,
levle:3
},
{
title: 'leaf 1-2-1',
expand: true,
levle:3
}
]
}
]
}
],
buttonProps: {
type: 'default',
size: 'small',
}
}
},
methods: {
renderContent (h, { root, node, data }) {
if(data.levle == 2){
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h(resolveComponent('Icon'), {
type: 'ios-pin',
style: {
marginRight: '8px',
color:'blue'||'gray'
}
}),
h('span', {},data.title ),
h('div', { style: {
display: 'inline-block',
width: '100%'
}},[
h('span', {},'('),
h('span', { style: {
color:'#f00'
}},56),
h('span', {},'/'),
h('span', {},89),
h('span', {},')'),
] ),
]),
]);
}else{
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h(resolveComponent('Icon'), {
type: 'ios-paper-outline',
style: {
marginRight: '8px'
}
}),
h('span', data.title),
h('span', { style: {
background:'#0f0',
color:'#fff',
padding:'1px 2PX',
borderRadius:'4px',
marginLeft: '4px'
}},'验'),
h('span', { style: {
background:'#0f0',
color:'#fff',
padding:'1px 2PX',
borderRadius:'4px',
marginLeft: '4px'
}},'考'),
h('span', { style: {
background:'#0f0',
color:'#fff',
padding:'1px 2PX',
borderRadius:'4px',
marginLeft: '4px'
}},'国'),
]),
]);
}
},
append (data) {
const children = data.children || [];
children.push({
title: 'appended node',
expand: true
});
data.children = children
},
remove (root, node, data) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
parent.children.splice(index, 1);
}
}
}
</script>
<style>
.demo-tree-render .ivu-tree-title{
width: 100%;
}
</style>
Tree 样式多元化
文章详细描述了如何在Vue中使用Tree组件进行递归渲染,包括不同层级的节点样式处理,以及如何添加和删除子节点的方法实现。
摘要由CSDN通过智能技术生成