以下代码直接扔进这里，可直接渲染
（1）普通渲染
<template>
<Tree :data="data3" :load-data="loadData" ></Tree>
</template>
<script>
export default {
data () {
return {
data3: [
{
title: ‘亭湖区‘,
loading: false,
render: (h, { root, node, data }) => {
return h(‘span‘, {
style: {
display: ‘inline-block‘,
width: ‘100%‘
}
}, [
h(‘span‘, [
h(‘Icon‘, {
props: {
type: ‘ios-options-outline‘
},
style: {
marginRight: ‘8px‘,
fontSize:‘20px‘
}
}),
h(‘span‘,{
style:{
fontSize:‘20px‘
}
}, data.title),
])
]);
},
children: []
}
]
}
},
methods: {
loadData (item, callback) {
setTimeout(() => {
const data = [
{
title: ‘金庭院‘,
totalService:10,
onlineService:2,
render:(h,{root,node,data})=>{
return h(‘span‘, {
style: {
display: ‘inline-block‘,
width: ‘100%‘
}
}, [
h(‘span‘,{
style:{
display:‘inline-block‘,
lineHeight:"24px",
borderBottom:‘1px solid black‘
}
}, [
h(‘Icon‘, {
props: {
type: ‘ios-home-outline‘
},
style: {
marginRight: ‘8px‘,
fontSize:‘20px‘
}
}),
h(‘span‘,{
style:{
fontSize:‘20px‘,
marginRight:‘20px‘
}
}, data.title),
h(‘span‘,{
style:{
fontSize:‘20px‘,
margin:‘0 20px‘
}
}, ‘共‘+data.totalService+‘台设备‘),
h(‘span‘,{
style:{
fontSize:‘20px‘,
marginLeft:‘20px‘
}
}, ‘在线‘+data.onlineService+‘台‘)
])
]);
}
},
{
title: ‘children‘,
render:(h,{root,node,data})=>{
return h(‘span‘, {
style: {
display: ‘inline-block‘,
width: ‘100%‘
}
}, [
h(‘span‘, [
h(‘Icon‘, {
props: {
type: ‘ios-home-outline‘
},
style: {
marginRight: ‘8px‘,
fontSize:‘20px‘
}
}),
h(‘span‘,{
style:{
fontSize:‘20px‘
}
}, data.title)
])
]);
}
},
{
title: ‘children‘,
render:(h,{root,node,data})=>{
return h(‘span‘, {
style: {
display: ‘inline-block‘,
width: ‘100%‘
}
}, [
h(‘span‘, [
h(‘Icon‘, {
props: {
type: ‘ios-home-outline‘
},
style: {
marginRight: ‘8px‘,
fontSize:‘20px‘
}
}),
h(‘span‘,{
style:{
fontSize:‘20px‘
}
}, data.title)
])
]);
}
},
];
callback(data);
}, 1000);
}
}
}
</script>
（2）渲染表格
<template>
<Tree :data="data3" :load-data="loadData" ></Tree>
</template>
<script>
export default {
data () {
return {
data3: [
{
title: ‘亭湖区‘,
loading: false,
render: (h, { root, node, data }) => {
return h(‘span‘, {
style: {
display: ‘inline-block‘,
width: ‘100%‘
}
}, [
h(‘span‘, [
h(‘Icon‘, {
props: {
type: ‘ios-options-outline‘
},
style: {
marginRight: ‘8px‘,
fontSize:‘20px‘
}
}),
h(‘span‘,{
style:{
fontSize:‘20px‘
}
}, data.title),
])
]);
},
children: []
}
]
}
},
methods: {
loadData (item, callback) {
setTimeout(() => {
const data = [
{
data:[{
name: ‘John Brown‘,
age: 18,
address: ‘New York No. 1 Lake Park‘,
date: ‘2016-10-03‘
}],
render:(h,{root,node,data})=>{
return h(‘Table‘,{
props:{
columns:[
{
title: ‘Name‘,
key: ‘name‘
},
{
title: ‘Age‘,
key: ‘age‘
},
{
title: ‘Address‘,
key: ‘address‘
}],
width:‘500‘,
data:data.data
},
on:{//调用table组件自身的事件函数
‘on-row-click‘:function(item,index){
console.log(item);
console.log(index)
}
}
})
}
},
];
callback(data);
}, 1000);
}
}
}
</script>
原文：https://www.cnblogs.com/seeking-knowledge/p/12747151.html