皮皮网

1.基于 VUE3 可视化低代码表单设计器
2.网页源代码中的格源"<tr>"、"<td>"、码格"</tr>"和"</td>"各是代码什么意思?
3.HTML空格代码

基于 VUE3 可视化低代码表单设计器

       格子表单/GRID-FORM已在Github开源，如能帮到您麻烦给个星点此查看在线文档及演示

       楔子

       大概4年前，格源我做了一个简单的码格动态表单功能，开发人员通过UI界面配置表单（其实就是代码巴适源码添加常用的控件，如文本框、格源下拉框等）就能向用户提供数据查询，码格反响不错，代码尤其是格源偏后端开发的小伙伴。

       时至今日，码格上述功能存在以下问题：

       目前书面上已经有不少优秀开源的代码同类产品，这里列出可二次开发的格源，同时具备表单渲染、码格表单设计的代码SHRDLU源码工具（截止至年底）

       再造个轮子吧

       同类型的开源产品各有千秋，适合不同的应用场景，然而跟我想要的还不够契合。权衡后，还是觉得自己弄一个。技术选型为vue3 + naive UI，使用pnpm进行包管理（monorepo结构）。

       不同于同类型产品的组件拖拽，我采用栅栏布局来堆积组件（实现起来简单，省事，暂不支持容器嵌套、子表单），通过设置组件占据的格子数可以使其独占一行，故取名GRID-FORM（栅栏表单），源码详见Github。079源码

       表单设计器

       得益于VUE的响应式，设计器所见即所得显得尤为丝滑，不然得自己手撸监听配置项变动事件及界面重绘。

       编辑器分为左中右三个区域（这是业内约定俗成的标准设计），有别于兄弟产品，我把左区域用作表单整体的参数编辑。为方便用户自定义组件，设计器对外暴露组件库参数，并封装了常用的组件（诸如输入框、单选/多选框、日期选择）。

       组件分为数据型（对应上图中的输入组件、选择组件）及展示型（上图的展示组件）两类，后者不参与表单提交。中枢 源码

       渲染器组件渲染

       每个组件有唯一编号，渲染函数为一个Object（key即为组件编号），需要扩展组件时添加对应的渲染函数即可。渲染时属性分为基本信息（名称我用_开头加以区分）及组件层面两类，分别对应了组件渲染函数的两个参数：attrs、props。

       渲染引擎处理完属性后，调用Render函数（不同UI库各自实现，使用者可根据业务需要自行覆写）得到组件实例。此处以文本输入框INPUT为例：

       默认值

       表单项默认值可以填写常量或占位符（在初始化时被模板引擎赋值），占位符格式为${ code}，用户可自行扩展处理函数。

       校验

       此处校验分为非空、内容格式两种

       当表单项勾选是多头源码否必填，则在提交前渲染器会对该值进行非空检测；若设置了校验正则，则对非空值进行正则表达式校验。

       事件&钩子函数

       参数说明

       数据联动

       常规的做法是输入类表单项增加事件（如onChange、onBlur、onFocus等），但是这样操作（实现）繁琐（困难），我的做法只需要填写一处代码（直观简单）

       要启用联动需要满足以下条件：

       渲染器初始化后，会对勾选监听值变动的表单项开启监听（没错，是每个表单值有独立的监听）从而获取到新旧值。注意，若在回调函数中对form改动会重新触发onChange事件。

       示例

       适配更多UI库

       目前已实现Naive UI、Vant4的渲染器

       我封装了渲染器的基础框架（组合式API），帮助使用者根据需要快速适配心仪的UI库。

       结语

       因个人能力有限，此工具在设计、实现上存在诸多不足，仅作学习交流。

网页源代码中的"<tr>"、"<td>"、"</tr>"和"</td>"各是什么意思?

       在网页源代码中，理解"<tr>"、"<td>"、"</tr>"和"</td>"这些标记的关键在于它们是HTML用来构建表格结构的基本元素。<table>标签定义了一个表格，它是整个表格结构的容器。当我们看到"<tr>"时，它标志着表格中的一行，就像是表格中的行号。"<td>"则代表着表格中的一个单元格，类似于表格的列和行交叉点上的格子，每个单元格可以包含文本、或其他内容。

       这些标记的使用方式是，每个表格通常包含若干个"<tr>"元素，它们之间通过"</tr>"来分隔，表示表格的行数。每一行"<tr>"下又可以包含多个"<td>"，它们之间同样用"</td>"来结束，表示该行的列数。因此，表格的行数由"<tr>"的个数决定，而列数则由"<td>"的个数决定。

       总的来说，"<tr>"和"<td>"共同构建了表格的二维结构，通过巧妙地组合，可以创建出复杂且有序的数据展示区域。

HTML空格代码

       HTML中，空格的编码是通过特定的字符实体或字符转义序列来实现的。最常见的是使用非转义空格字符，即直接输入一个空格键，HTML会识别为" "。在编程中，如果你想要在HTML源代码中显示一个实际的空格，可以使用字符实体" "，它会被浏览器转换为一个空白。

       在网页设计和数据输入中，尽管空格看似无形，但它被视为一个字符，占用一格的位置。例如，在网页表格的字段中，即使没有显式的输入，输入一个空格也会被记录。因此，务必留意，避免在不需要的地方无意输入空格，尤其是搜索引擎查询时，空格可以作为一种临时的替代，用于分隔搜索关键词。

       此外，从视觉上看，HTML中的空格并不直接表现为一个可见的格子，但它在布局和格式化文本时起到了重要作用，比如调整行间距或对齐文本。理解空格在HTML中的行为，对于创建清晰、易读的网页内容至关重要。