如何自定义表格字段?

4.x版本开始,表格字段的渲染做了优化,同时自定义的vue文件的入口也换了新写法,普通组件的通过this.setComponent自定义vue组件,由于表格内字段同时还会有编辑态,所以入口改到了renderDefaultSlot方法内,示例代码如下

import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType } from '@kunlun/dependencies';
import DetailStringUpperCaseField from './CustomTableNumber.vue';
import { createVNode } from 'vue';

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    ttype: [ModelFieldType.Integer, ModelFieldType.Float],
    viewType: [ViewType.Table],
    // widget: 'CustomTableNumberWidget'
  })
)
export class CustomTableNumberWidget extends TableNumberWidget {

  // 表格详情模式渲染入口
  @Widget.Method()
  public renderDefaultSlot(context) {
    const value = this.compute(context);
    if (value) {
      // 自定义组件入口在此处
      return [createVNode(DetailStringUpperCaseField, { value })];
    }
    return [];
  }
}

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

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

(0)
汤乾华的头像汤乾华数式员工
上一篇 2023年11月3日 下午3:36
下一篇 2023年11月6日 下午2:33

相关推荐

  • 自定义组件之手动渲染基础(v4)

    阅读之前 你应该: 了解DSL相关内容。母版-布局-DSL 渲染基础(v4) 了解SPI机制相关内容。组件SPI机制(v4.3.0) 了解组件相关内容。 Class Component(ts)(v4) 自定义组件之自动渲染(组件插槽的使用)(v4) 为什么需要手动渲染 在自定义组件之自动渲染(组件插槽的使用)(v4)文章中,我们介绍了带有具名插槽的组件可以使…

    2023年11月1日
    8800
  • 创建与编辑一体化

    在业务操作中,用户通常期望能够在创建页面后立即进行编辑,以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能,使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中,我们首先需要设计出对应的页面。完成页面设计后,将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能,即根据前端传入的数据是否包含id来判断是创建操…

    2023年11月21日
    33500
  • 文件上传组件前端校验超128长度大小,不清楚怎么配置

    原因是拼上后端返回的文件全路径后超出了字段的存储长度,后端通过注解@Field.String(size=1024)修改字段的存储长度后重新运行一遍服务。

    2023年11月1日
    10900
  • oio-drawer抽屉

    屏幕边缘滑出的浮层面板。 何时使用 抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。 当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。 当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。 API 参数 说明…

    2023年12月18日
    10400
  • OioProvider详解

    OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务,并使用Grap…

    2023年11月6日
    11100

发表回复

登录后才能评论