前言:本文主要聚集于 TableWidget
和 FormWidget
,对两者以外的内容不做赘述。
TableWidget
和 FormWidget
作为一个基本的渲染模块与 Mask
等不同,TableWidget
与 FormWidget
有着明确的目的,比如 TableWidget
就是作为一个表格视图,这种名称中可以
看得出来。其将表格的一系列能力聚拢,如单元格,行列选择排序,翻页等等;
TableWidget
我们使用表格到底是在使用什么?
在我们讲述渲染流程前,我们需要提一个问题,在我们使用表格组件时,我们在使用什么,换而言之,我们对表格组件中关注的是什么?应该说我们更关注的是表格所展示的数据。TableWidget
或者说整个低代码其实解决的就是这个问题,让我们可以很方便的展示数据。不用关心一些细枝末节
TableWidget 的渲染
TableWidget
在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable
,如 allowRowClick
,rowClickMode
等等,这些值会作为 Props 传递给 DefaultTable
,DefaultTable
则一定意义上充当了一个桥接层,主要做了两件事,处理 Props, 处理 Slot,TableWidget
传递给 DefaultTable
的 Props 会经过 DefaultTable
再次组合,创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot,比如 OioPagination
组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable
的处理后, props
与 slot
会进一步交给 OioTable
进行渲染,OioTable
则会进一步聚合处理,比如如果没有 defaultSlot
则进行空值的渲染,如果存在 footSlot
则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构,而我们真正关心的数据则由一个个 BaseTableColumnWidget
渲染。BaseTableColumnWidget
的渲染过程类似于 TableWidget
,其负责组装 DefaultTableColumn
渲染所需要的 props,然后交给 OioTableColumn
进行实际渲染。并且会有多种基于 BaseTableColumnWidget
的 widget
通过重写 renderDefaultSlot
,renderEditSlot
,renderContentSlot
,renderHeaderSlot
等几个 props 实现不同状态,不同类型等组件的渲染。
通过 TableWidget
与 BaseTableColumnWidget
相结合, Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后,不可避免的会有数据交互,比如分页,排序,过滤等,这些交互都由 TableWidget
与 BaseTableColumnWidget
共同完成。
比如排序翻页等,TableWidget
会将事件作为 props 向下注入,当事件被调用,TableWidget
会进行处理,比如发起请求,或者对内部数据排序等。
而除了数据的展示,还有一些动作,即 Action
,Action 被触发时会按照内部的配置进行工作,比如编辑时,将获取 activeRecord
,随后触发 Table 的编辑。 TableWidget
就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作
FormWidget
FormWidget
与 TableWidget
一样,也是作为一个渲染模块,但是它与 TableWidget
不同的是,FormWidget
是作为一个表单视图,其将表单的一系列能力聚拢,如表单提交,表单校验,表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别,比如 FormWidget
没有提供翻页,排序,过滤等能力,因为这些能力属于表格的能力,而 FormWidget
则更关注于表单的能力。提供了数据的存储,提交,校验等能力
Form 在渲染时流程与 Table 大同小异,其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染,不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西,当页面上的控件发生变化,其变更的值会被收集到 FormData 中,并在后续中使用。同时在编辑已有数据场景下,Form 会将数据加载到 FormData,随后下放给 FormFiledWidget。
异同之处
从介绍中可以看出,Table 侧重于数据的查询展示,Form 则侧重于数据的变动处理,但是抽象的看其核心其实是同一套逻辑,即数据的存储与展示,中间或许会有对数据的某些处理,但是并不是本质上的区别,两者在核心理念上是一致的,即让使用者只需要关心数据本身,而不需要关注于繁琐的视图构造,这是整个低代码甚至前端的发展方向。
Oinone社区 作者:liji2原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/20771.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验