表格字段API

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

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日

前端

【界面设计器】自定义字段组件基础

阅读之前本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录概述平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。通过界面设计器可以创建自定义组件，并为组件添加对应的元件。界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。界面设计器-组件管理名词解释页面设计：使用界面设计器设计页面的页面。属性面板设计：使用界面设计器设计属性面板的页面。设计页面：页面设计和属性面板设计的统称。组件库：展示在设计页面左侧的全部可拖拽组件。组件：在组件库中可拖拽的最小单元。元件：一个组件中的具体实现，是组件的最小单元。属性面板：展示在设计页面右侧的元件属性。页面设计属性面板设计组件管理入口进入界面设计器后，可通过上方标签页切换至【组件】管理页面。创建第一个组件点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。创建第一个元件点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。点击【添加元件】，可以看到如下【创建元件】弹窗。表单字段解释元件名称：显示名称，仅在管理页面做展示使用。 API名称：SPI中的widget属性。支持字段业务类型：SPI中的ttype属性。支持多值：SPI中的multi属性。支持视图类型：SPI中的viewType属性。元件描述：元件功能描述内容，仅在管理页面做展示使用。填入以下内容，并点击【确定】。设计元件属性面板点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。点击【发布】按钮进行页面的发布。至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。在页面中使用【文本输入框】由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。属性变化在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。组件变化由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。组件可切换规则只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。（右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。）所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。是否多值：否。当【支持多值】相同时条件成立。使用低无一体为组件上传代码实现进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。 PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。结语至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。

数式-海波
2023年11月1日
2.1K000
前端

如何通过浏览器开发者工具提高调试效率

1.通过vue devtool查看vue组件和oinone组件的信息平台字段、动作、视图组件都是以Widget结尾的，可以通过关键字快速找到组件安装vue devtool插件 chrome安装最新版的vue devtool插件谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件安装好插件后，可以通过插件选中html页面中的元素查看相关信息相关特性了解组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑

nation
2024年9月9日
1.2K000
前端

如何通过 Oineone 平台自定义视图

在 Oineone 平台上，自定义视图允许用户替换默认提供的页面布局，以使用自定义页面。本文将指导您如何利用 Oineone 提供的 API 来实现这一点。默认视图介绍 Oineone 平台提供了多种默认视图，包括：表单视图表格视图表格视图 (左树右表) 详情视图画廊视图树视图每种视图都有其标准的 layout。自定义视图实际上是替换这些默认 layout 的过程。默认的表单视图 layout <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 内嵌的的表单视图 layout <view type="FORM"> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 默认的表格 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 内嵌的的表格 <view type="TABLE"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" /> </element> </view> 左树右表 <view type="table"> <pack title="" widget="group"> <view type="search"> <element slot="search" widget="search"/> </view> </pack> <pack title="" widget="group"> <pack widget="row" wrap="false"> <pack widget="col" width="257"> <pack title="" widget="group"> <pack widget="col"> <element slot="tree" widget="tree"/> </pack> </pack> </pack> <pack mode="full" widget="col"> <pack widget="row"> <element justify="START" slot="actionBar"…

汤乾华
2024年4月3日
1.1K000
低无一体

主题设置-设置表格全局样式

在启动工程的main.ts通过主题配置表格全局样式 registerThemeItem('demoTheme', { 'table-config': { // 是否带有边框 default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框） border: 'full', // 是否带有斑马纹 stripe: false, // 当鼠标点击行时，是否要高亮当前行 isCurrent: true } as Partial<TableThemeConfig> }); VueOioProvider( { browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, theme: ['demoTheme'], // 其他代码 });

nation
2024年8月2日
1.2K000
前端

oinone的rsql与传统sql语法对照表

rsql sql 描述 field01 == "name" field01 = "name" 等于 field01 != "name" field01 != "name" 不等于 field01 =gt= 1 field01 > 1 大于 field01 =ge= 1 field01 >= 1 大于等于 field01 =lt= 1 field01 < 1 小于 field01 =le= 1 field01 <= 1 小于等于 field01 =isnull=true field01 is null 字段为null field01 =notnull= 1 field01 is not null 字段不为null field01 =in= ("foo") field01 in ("foo") 多条件 field01 =out= ("foo") field01 not in ("foo") 不在多条件中 field01 =cole= field02 field01 = field02 字段作为查询参数 field01 =colnt= field02 field01 != field02 字段作为查询参数 field01 =like="foo" field01 like "%foo%" 全模糊匹配，rsql语法中无需拼接通配符”%“ field01 =starts="foo" field01 like "foo%" 前缀模糊匹配，rsql语法中无需拼接通配符”%“ field01 =ends="foo" field01 like “%foo" 后缀模糊匹配，rsql语法中无需拼接通配符”%“ field01 =notlike="foo" field01 not like "%foo%" 全模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =notstarts="foo" field01 not like "foo%" 前缀模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =notends="foo" field01 not like “%foo" 后缀模糊不匹配，rsql语法中无需拼接通配符”%“ field01 =has=(ENUM_NAME1, ENUM_NAME2) 有多值枚举中的几个值 field01 =hasnt=(ENUM_NAME1,ENUM_NAME2) 没有多值枚举中的几个值 field01 =bit=ENUM_NAME1 有二进制枚举中的单个值 field01 =notbit=ENUM_NAME1 没有二进制枚举中的单个值前端代码中使用工具类拼接rsql 该工具类在oinone的前端基础框架中提供 import { Condition } from '@kunlun/dependencies'; const rsqlCondition = new Condition('field01').equal('foo') .and(new Condition('field02').in(['bar'])) .and(new Condition('field03').notIn(['foo'])) .or(new Condition('field04').greaterThanOrEuqalTo(12)) .or(new Condition('field05').like('foo')) .or(new Condition('field06').notStarts('bar')) .or(new Condition('field07').isNull()) .or(new Condition('field08').notNull()) .and(new Condition('field09').bitEqual('BIT_ENUM_1')) .and(new Condition('field10').bitNotEqual('BIT_ENUM_2')) .and(new Condition('field11').has('ENUM_NAME_1')) .and(new Condition('field12').hasNot(['ENUM_NAME_2', 'ENUM_NAME_3'])); const rsqlStr = rsqlCondition.toString();…

oinone
2023年11月1日
4.0K002

登录后才能评论

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

相关推荐

【界面设计器】自定义字段组件基础

如何通过浏览器开发者工具提高调试效率

如何通过 Oineone 平台自定义视图

主题设置-设置表格全局样式

oinone的rsql与传统sql语法对照表

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`