表格字段API

汤乾华 • 2023年11月16日 pm1:46 • 前端, 表格字段API • 阅读 879

BaseTableFieldWidget

表格字段的基类.

示例

class MyTableFieldClass extends BaseTableFieldWidget{

}

内置常见的属性

`dataSource`

当前表格数据

`rootData`

根视图数据

`activeRecords`

当前选中行

`userPrefer`

用户偏好

`width`

单元格宽度

`minWidth`

单元格最小宽度

`align`

内容对齐方式

`headerAlign`

头部内容对齐方式

`metadataRuntimeContext`

当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据

`urlParameters`

获取当前的url

`field`

当前字段

详细信息

用来获取当前字段的元数据

`model`

当前模型

详细信息

用来获取当前模型的元数据

`view`

当前视图

详细信息

界面设计器配置的视图dsl

`disabled`

是否禁用

详细信息

来源于界面设计器的配置

`invisible`

当前字段是否不可见

详细信息

来源于界面设计器的配置，true -> 不可见， false -> 可见

`required`

是否必填

详细信息

来源于界面设计器的配置，如果当前字段是在详情页，那么是false

`readonly`

是否只读

详细信息

来源于界面设计器的配置，如果当前字段是在详情页、搜索，那么是false

`label`

当前字段的标题

详细信息

用来获取当前字段的标题

内置常见的方法

`renderDefaultSlot`

渲染单元格内容

示例

@Widget.Method()
  public renderDefaultSlot(context): VNode[] | string {
    // 当前单元格的数据
    const currentValue = this.compute(context) as string[];
    return [createVNode('div', { class: 'table-string-tag' }, currentValue)];
  }

`renderHeaderSlot`

自定义渲染头部

示例

  @Widget.Method()
  public renderHeaderSlot(context: RowContext): VNode[] | string {
    const children = [createVNode('span', { class: 'oio-column-header-title' }, this.label)];
    return children;
  }

`getTableInstance`

获取当前表格实例（vxe-table）

`getDsl`

获取界面设计器的配置

Oinone社区作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/4566.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

4.6.X

汤乾华数式员工

0 0

Schedule相关

上一篇 2023年11月16日

弹窗生命周期实践

下一篇 2023年11月17日

前端

表格字段配置Switch开关

在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果当switch切换的时候，会执行对应的action

汤乾华
2023年11月21日
1.4K000
低无一体

如何编写自定义字段组件的校验逻辑

介绍自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。示例代码 import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType } from '@kunlun/dependencies' @SPI.ClassFactory(FormFieldWidget.Token({ viewType: [ViewType.Form], ttype: ModelFieldType.String, widget: 'DemoPhone' })) export class DemoFormPhoneFieldWidget extends FormStringFieldWidget { // 字段校验方法 public async validator(): Promise<ValidatorInfo> { // 建议先调用平台内置的通用校验逻辑 const res = await super.validator(); if (!isValidatorSuccess(res)) { // 校验失败直接返回 return res; } // 编写自有校验逻辑 if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) { // 通过内置的validatorError方法提示校验提示信息 return this.validatorError('手机号格式错误'); } // 无异常，用内置的validatorSuccess返回校验通过的信息 return this.validatorSuccess(); } } 扩展学习自定义字段组件如何处理vue组件内的表单校验

nation
2024年8月23日
1.3K000
组件

OioMessage 全局提示

全局展示操作反馈信息。何时使用可提供成功、警告和错误等反馈信息。顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。 API 组件提供了一些静态方法，使用方式和参数如下： OioMessage.success(title, options) OioMessage.error(title, options) OioMessage.info(title, options) OioMessage.warning(title, options) options 参数如下：参数说明类型默认值版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

汤乾华
2023年12月18日
852000
前端

前端6.2.x升级指南

升级背景从 6.2.x 版本开始，平台底层核心代码已全面开源（设计器相关代码除外），本次升级涉及包名变更和配置调整，以下是详细的升级步骤 1. 更新 .npmrc 配置修改当前项目根目录 .npmrc 文件，内容如下： registry=https://registry.npmmirror.com/ @oinone:registry=http://nexus.shushi.pro/repository/kunlun/ @kunlun:registry=http://nexus.shushi.pro/repository/kunlun/ shamefully-hoist=true legacy-peer-deps=true link-workspace-packages = true prefer-workspace-packages = true recursive-install = true lockfile=true 2. 包名变更以前的包是 @kunlun/xxxx，现在的包名是@oinone/kunlun开头，所以需要全部替换修改。旧包名新包名 @kunlun/dependencies @oinone/kunlun-dependencies @kunlun/vue-ui-antd @oinone/kunlun-vue-ui-antd 3. 升级依赖版本修改所有 package.json 中更新所有平台相关依赖： – "@kunlun/dependencies": "~5.7.0" + "@oinone/kunlun-dependencies": "~6.2.0" boot工程的package.json新增devDependencies依赖 "devDependencies": { "@types/lodash": "4.14.182", "@types/lodash-es": "4.17.6", ….. } 4. 更新代码引用全局搜索并替换代码中的所有 @kunlun/ 为 @oinone/kunlun- 完整的 main.ts import 'ant-design-vue/dist/antd.min.css'; import 'element-plus/dist/index.css'; import '@oinone/kunlun-vue-ui-antd/dist/oinone-kunlun-vue-ui-antd.css'; import '@oinone/kunlun-vue-ui-el/dist/oinone-kunlun-vue-ui-el.css'; import '@oinone/kunlun-designer-common/dist/oinone-kunlun-designer-common.css'; import '@oinone/kunlun-model-designer/dist/oinone-kunlun-model-designer.css'; import '@oinone/kunlun-workflow-designer/dist/oinone-kunlun-workflow-designer.css'; import '@oinone/kunlun-workflow/dist/oinone-kunlun-workflow.css'; import '@oinone/kunlun-data-designer/dist/oinone-kunlun-data-designer.css'; import '@oinone/kunlun-microflow-designer/dist/oinone-kunlun-microflow-designer.css'; import 'reflect-metadata'; import ElementPlus from 'element-plus'; import { App } from 'vue'; import { VueOioProvider, RuntimeContextManager } from '@oinone/kunlun-dependencies'; // 设计器 import '@oinone/kunlun-ui-designer-dependencies'; import '@oinone/kunlun-print-designer-dependencies'; import '@oinone/kunlun-workflow'; import '@oinone/kunlun-workflow-designer'; import '@oinone/kunlun-model-designer'; import '@oinone/kunlun-data-designer'; import '@oinone/kunlun-data-designer-open-pc'; import '@oinone/kunlun-eip-dependencies'; import '@oinone/kunlun-ai-dependencies'; import '@oinone/kunlun-microflow-designer'; import '@oinone/kunlun-designer-common-ee'; // 下面三个依赖是当前工程的包，请根据实际场景修改 import '@ss/oinone'; import '@ss/admin-widget'; import '@ss/project'; VueOioProvider( { browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' } }, [ () => { /// 获取当前vue实例 const app = RuntimeContextManager.createOrReplace().frameworkInstance as App; } ] ); 当配置全部修改完成后，重写安装依赖 # 清理旧依赖 pnpm clean # 安装新依赖 pnpm install

汤乾华
2025年6月17日
404001
前端

【界面设计器】自定义字段组件实战——轮播图

阅读之前此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录业务背景用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。业务分析从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。名词解释业务模型：需要进行可视化管理的存储模型或代理模型。准备工作你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段）你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。业务模型定义（以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称业务类型是否多值长度(单值长度) 编码 code 文本否 128 名称 name 文本否 128 轮播图 carouselImages 文本是 512 实现页面效果展示表格视图表单视图-创建表单视图-编辑详情视图根据业务背景添加轮播图字段到所有视图轮播图字段信息：字段业务类型：文本多值：是使用组件：图片无代码模型在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。低代码模型与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。演示图片下载创建组件、元件准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。创建轮播图组件创建轮播图元件根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计）在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。设计轮播图的属性面板通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息：功能 API名称业务类型选用组件可选项是否自动切换 autoplay 布尔开关 -…

数式-海波
2023年11月1日
3.7K000

登录后才能评论

shao 2024年11月25日

支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈

评论于 6.4 国际化之多语言
xiao3 2024年11月25日

只支持英语吗？如何添加其他语种？

评论于 6.4 国际化之多语言
psyy 2024年8月21日

1.4 Oinone对软件特性的思考，技术原理一段，几余（几->冗） 1.4 Oinone对软件特性的思考，协同演进一段，新特生（生->性）

评论于 1.4 Oinone对软件特性的思考
望闲 2024年6月21日

感谢反馈，已修正

评论于 1.5 Oinone与行业对比
xinf 2024年6月14日

bug反馈：采用无一体设计 -> 采用低无一体设计

评论于 1.5 Oinone与行业对比

表格字段API

BaseTableFieldWidget

示例

内置常见的属性

dataSource

rootData

activeRecords

userPrefer

width

minWidth

align

headerAlign

metadataRuntimeContext

urlParameters

field

详细信息

model

详细信息

view

详细信息

disabled

详细信息

invisible

详细信息

required

详细信息

readonly

详细信息

label

详细信息

内置常见的方法

renderDefaultSlot

示例

renderHeaderSlot

示例

getTableInstance

getDsl

相关推荐

表格字段配置Switch开关

如何编写自定义字段组件的校验逻辑

OioMessage 全局提示

前端6.2.x升级指南

【界面设计器】自定义字段组件实战——轮播图

Leave a Reply

`dataSource`

`rootData`

`activeRecords`

`userPrefer`

`width`

`minWidth`

`align`

`headerAlign`

`metadataRuntimeContext`

`urlParameters`

`field`

`model`

`view`

`disabled`

`invisible`

`required`

`readonly`

`label`

`renderDefaultSlot`

`renderHeaderSlot`

`getTableInstance`

`getDsl`