208 - 树组件 渲染函数

[GJ-GIS]

<script setup lang="ts">
import { h } from 'vue';

interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
const props = defineProps<{data: TreeData[]}>()
const data = props.data
function handle(data, arr = [], depth = 0){
  data.forEach(item => {
    let arrson = []
    arrson.push(item.title)
    if(item.children){
      arrson = handle(item.children, arrson,  depth + 1)
    }
    arr.push(h('div',{class: `tree${depth}`}, arrson))
  })
  return arr
}
function CustomTree(ps:any, context:any){
  const data = ps.data 
  let result  = [] 
  handle(data, result)
  return h('div', result)  
}  
CustomTree.props = ['data']
</script>

<template>
  <CustomTree :data="data"></CustomTree>
  <!-- do something.... -->
</template>

<style>
.tree0{
  color: red;
}
.tree1 {
  margin-left: 10px;
  color: green;
}
.tree2 {
  margin-left: 10px;
  color: blue;
}
</style>

<script setup lang="ts">
import { h } from 'vue';

interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
const props = defineProps<{data: TreeData[]}>()
function TreeComponent(props, ctx){
  const { data } = props
  if(!data || !data.length) return
  const lis = []
  for(let item of data){
    const node = [item.title]
    if(item.children && item.children.length > 1){
      node.push(TreeComponent({data: item.children}))
    }
    lis.push(h('li', {key: item.key} ,node))
  }
  return h('ul',lis) 
}
TreeComponent.props = ['data']

</script>

<template>
  <!-- do something.... -->
  <TreeComponent :data="props.data" />
</template>