# GRID-FORM-RENDER-TREE

基于树形结构实现的格子表单渲染器，打包为通用组件（Web Components）

此渲染器功能极为简单，且不能支持全部的组件，慎用🙂

技术选型经历

最后没有用树形结构展示😂

• jsoneditor
• fancytree：JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

使用 Vue3 构建 WebComponents

SFC 构建

注意，需要以后缀.ce.vue结尾，否则无法正确编译内联的 css

如何使用 demo.html

demo.html为原生演示文件

1. 构建包pnpm tree:build，成功则在 dist 生成 js、css 两个文件
2. 启动本地静态资源服务（如 live-server、python -m http.sever），用浏览器访问 demo.html

 grid-form >> pnpm tree:build

vite v5.2.8 building for production...
✓ 25 modules transformed.
dist/style.css         0.33 kB │ gzip:  0.21 kB
dist/render-tree.js  142.81 kB │ gzip: 46.08 kB
✓ built in 908ms