自定义组件之手动渲染任意视图（v4）

相关推荐

• 前端

  TableWidget 与 FormWidget 浅析

  前言：本文主要聚集于 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 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

  liji2

  2025年3月25日

  943000
• 低无一体

  列表页内上下文无关的动作如何添加自定义上下文

  场景 在界面设计器，可以配置当前列表页从上个页面带的上下文参数，现在需要传递这个上下文到下个页面，设计器没有配置入口，我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文，手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }

  nation

  2024年8月20日

  1.9K000
• 组件

  oio-modal 对话框

  API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false footer 底部内容，当不需要默认底部按钮时，可以设为 :footerInvisible="true" slot 确定取消按钮 getTriggerContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body keyboard 是否支持键盘 esc 关闭 boolean true mask 是否展示遮罩 boolean true maskClosable 点击蒙层是否允许关闭 boolean true enterText 确认按钮文字 string 确定 title 标题 string|slot 无 visible(v-model:visible) 对话框是否可见 boolean 无 width 宽度 string|number 520 wrapClassName 对话框外层容器的类名 string – zIndex 设置 Modal 的 z-index number 1000 cancelCallback 点击遮罩层或右上角叉或取消按钮的回调, return true则关闭弹窗 function(e) enterCallback 点击确定回调 function(e)

  汤乾华

  2023年12月18日

  1.8K000
• 前端

  如何在自有前端工程中使用gql请求？

  场景 客户在个性化程度比较高的h5工程中想使用平台的服务端能力，这个时候需要调用后端的gql请求，此时需要引入平台的请求库依赖 npm的package.json中加入依赖 此文档以4.x举例，使用其他版本的请自行修改版本号 "dependencies": { "@kunlun/request": "~4.3.0", "@kunlun/state": "~4.3.0" } 使用示例 import { HttpClient } from ‘@kunlun/request’ const http = HttpClient.getInstance() http.setBaseURL(”) export const login = (data) => { const gqlBody = `mutation { pamirsUserTransientMutation { login(user: {login: “${data.username}”, password: “${data.password}”}) { broken errorMsg errorCode errorField } } }` return http.mutate(‘user’, gqlBody) } 注意事项 开发环境记得配置oinone请求的路由转发规则，这里以vite.config.js举例 import { defineConfig } from ‘vite’ export default defineConfig({ server: { port: 8088, open: true, proxy: { ‘/pamirs’: { changeOrigin: true, // 服务端请求地址 target: ‘http://127.0.0.1:8091’ } } } })

  oinone

  2023年11月1日

  1.6K000
• 代码实践

  自定义表格支持合并或列、表头分组

  本文将讲解如何通过自定义实现表格支持单元格合并和表头分组。 点击下载对应的代码 在学习该文章之前，你需要先了解： 1: 自定义视图2: 自定义视图、字段只修改 UI，不修改数据和逻辑3: 自定义视图动态渲染界面设计器配置的视图、动作 1. 自定义 widget 创建自定义的 MergeTableWidget，用于支持合并单元格和表头分组。 // MergeTableWidget.ts import { BaseElementWidget, SPI, ViewType, TableWidget, Widget, DslRender } from '@kunlun/dependencies'; import MergeTable from './MergeTable.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MergeTableWidget' }) ) export class MergeTableWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(MergeTable); return this; } /** * 表格展示字段 */ @Widget.Reactive() public get currentModelFields() { return this.metadataRuntimeContext.model.modelFields.filter((f) => !f.invisible); } /** * 渲染行内动作VNode */ @Widget.Method() protected renderRowActionVNodes() { const table = this.metadataRuntimeContext.viewDsl!; const rowAction = table?.widgets.find((w) => w.slot === 'rowActions'); if (rowAction) { return rowAction.widgets.map((w) => DslRender.render(w)); } return null; } } 2. 创建对应的 Vue 组件 定义一个支持合并单元格与表头分组的 Vue 组件。 <!– MergeTable.vue –> <template> <vxe-table border height="500" :column-config="{ resizable: true }" :merge-cells="mergeCells" :data="showDataSource" @checkbox-change="checkboxChange" @checkbox-all="checkedAllChange" > <vxe-column type="checkbox" width="50"></vxe-column> <!– 渲染界面设计器配置的字段 –> <vxe-column v-for="field in currentModelFields" :key="field.name" :field="field.name" :title="field.label" ></vxe-column> <!– 表头分组 https://vxetable.cn/v4.6/#/table/base/group –> <vxe-colgroup title="更多信息"> <vxe-column field="role" title="Role"></vxe-column> <vxe-colgroup title="详细信息"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-colgroup> </vxe-colgroup> <vxe-column title="操作" width="120"> <template #default="{ row, $rowIndex }"> <!– 渲染界面设计器配置的行内动作 –> <row-action-render :renderRowActionVNodes="renderRowActionVNodes" :row="row" :rowIndex="$rowIndex" :parentHandle="currentHandle" ></row-action-render> </template> </vxe-column> </vxe-table> <!– 分页 –> <oio-pagination :pageSizeOptions="pageSizeOptions" :currentPage="pagination.current"…

  汤乾华

  2025年1月9日

  2.0K000