自定义字段样式

在日常开发中,我们经常会遇到需要根据业务规则动态展示字段样式的场景,比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例,带大家实现这一功能。

以下以 自定义表格字段文字颜色 为例。


实现步骤

1. 在界面设计器中添加组件

通过界面设计器,添加一个组件
自定义字段样式


2. 创建元件

以表格的「金额字段」为例,创建对应的元件(可根据自己的业务场景调整)。
自定义字段样式


3. 配置元件属性

进入元件设计页面,从组件库中拖入「单行文本」到设计区域。在右侧属性面板中填写相关配置并保存

自定义字段样式


4. 保存元件

完成配置后,保存元件。


5. 发布元件

将元件发布,供页面设计使用。


6. 切换表格字段

进入页面设计器,将表格中的字段切换为刚刚创建的元件。

自定义字段样式


7. 配置字段颜色

在右侧属性面板中,配置字段的文字颜色:

  • 固定颜色:直接输入颜色值(如 red)。
  • 动态颜色:输入表达式,根据业务逻辑动态展示颜色。例如:当前行的名称等于 1 时显示红色,否则为蓝色。

示例表达式:

activeRecord.name === '1' ? 'red' : 'blue'

自定义字段样式


8: 在代码中,自定义对应的表格字段

import {
  SPI,
  BaseFieldWidget,
  ModelFieldType,
  ViewType,
  TableCurrencyFieldWidget,
  Widget,
  RowContext,
  numberZeroFill,
  numberAddThousandth,
  Expression,
  ExpressionRunParam
} from '@kunlun/dependencies';
import { toString } from 'lodash-es';
import { createVNode, VNode } from 'vue';

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    viewType: [ViewType.Table],
    ttype: [ModelFieldType.Currency],
    widget: 'TableCurrencyColor'
  })
)
export class TableCustomCurrencyFieldWidget extends TableCurrencyFieldWidget {
  computedFieldColor(context: RowContext) {
    const { fieldColor = ' ' } = this.getDsl();

    if (!fieldColor) {
      return null;
    }

    // 如果当前颜色是表达式,则需要计算
    if (Expression.hasKeywords(fieldColor)) {
      const params: ExpressionRunParam = {
        activeRecords: [context.data],
        rootRecord: {},
        openerRecord: {},
        scene: ''
      };

      return Expression.run(params, fieldColor, fieldColor)!;
    }

    return fieldColor;
  }

  @Widget.Method()
  public renderDefaultSlot(context: RowContext): VNode[] | string {
    let value = numberZeroFill(toString(super.compute(context)), this.getPrecision(context));
    if (this.getShowThousandth(context)) {
      value = numberAddThousandth(value);
    }

    return [
      createVNode(
        'div',
        {
          style: {
            color: this.computedFieldColor(context)
          }
        },
        value
      )
    ];
  }
}

9: 页面效果图

自定义字段样式

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

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

(0)
汤乾华的头像汤乾华数式员工
上一篇 2025年1月8日 am10:30
下一篇 2025年1月9日 pm5:12

相关推荐

  • 前端学习路径

    准备工作 环境准备-1h安装基础环境,需要Node和PNPM如果已经安装检查对应版本,体验阶段建议版本保持一致 克隆一个空工程-0.5h全新工程 注意事项-0.5h静态资源解压,如果还没有对应的后端服务。可以使用:https://demo.oinone.top(Oinone演示环境),账号密码:admin/admin 前端基础 1.1.1了解组件-3h– 组件如何开发– 组件如何复用– 组件如何嵌套 1.1.2 更近一步-5h– 构建更复杂的工作台– 如何发起后端请求– 构建一个通用的图表组件 1.1.3 深入了解概念-5h– 通用概念、名词解释– 页面渲染原理– 组件执行原理 1.1.4业务实战-实现通用的甘特图组件-8h– 怎么与第三方结合– 如何在开源组件上接入Oinone, 并复用 1.1.5 业务实战-实现通用的画廊组件-6h–如何更近一步复用–基础学习结束 前端进阶 2.1.1代码和无代码如何结合-4h– 了解无代码如何使用和基础概念 2.1.2使用无代码搭建增删改查-8h– 了解无代码如何使用和基础概念 最后一步 当您实现玩基础和进阶的所有的效果,Oinone的整体使用您已经大致掌握了,接下来您可以找一个当前业务的场景来实现它把!

    2025年9月1日
    59400
  • 如何使用源码的方式配置表达式

    自定义占位符定义表达式 数据权限定义表达式: ${thisTeacherName} 界面设计器查询条件定义:$#{thisTeacherName}需要加上#号 以上配置都可以通过查看queryWrapper里面的originRsql查看占位符是否被正确替换。 显隐、过滤条件表达式定义 显隐、过滤都可以加载字段注解里以及xml定义里 显隐: invisible="$!{activeRecord.deadline}" / invisible = true @Field.String @Field(displayName = "视图/页面", invisible = true) private String viewName; 过滤。 domain = " code == ${activeRecord.id} " / domain = "code == '111' " @Field.one2many @Field(displayName = "子订单列表", summary = "子订单列表") @Field.Relation(relationFields = {"code"}, referenceFields = {"code"}, domain = "code != '1234'") private List<ChildOrder> orderList; 更多获取视图数据的写法参考文章上下文在字段和动作中的应用 rsql表达式定义 参考:oinone的rsql与传统sql语法对照表

    2025年3月13日
    60700
  • IP黑白名单实现拦截三方用户

    已知厂商IP为10.139.0.1,经系统检测122.233.24.28、138.122.12.9为风险IP,需要禁止访问。 白名单配置:10.139.0.1 黑名单配置:122.233.24.28、138.122.12.9 厂商请求到Oinone开放平台请求头需携带X-Forwarded-For和X-Real-IP,例如: X-Forwarded-For 122.233.24.28 X-Real-IP 122.233.24.28 经Nginx代理后,oinone获取的请求头内容: X-Forwarded-For 122.233.24.28, 10.139.0.1 # 代理追加厂商IP到末尾 X-Real-IP 122.233.24.28 # 保持客户端原始值,Nginx不处理 效果:厂商10.139.0.1发送的请求且用户X-Real-IP不在黑名单内才放行。 注意事项 Nginx如果配置X-Real-IP需关闭,否则拿到的永远是厂商IP。 proxy_set_header X-Real-IP $remote_addr; 相关文章 开放应用中的ip黑白名单

    2025年5月15日
    22800
  • 模版名称如何翻译

    导出翻译项: mutation { excelExportTaskMutation { createExportTask( data: { workbookDefinition: { model: "file.ExcelWorkbookDefinition" name: "excelLocationTemplate" } } ) { name } } } { "path": "/file", "lang": "en-US" } 导入翻译项: mutation { excelImportTaskMutation { createImportTask( data: { workbookDefinition: { model: "file.ExcelWorkbookDefinition" name: "excelLocationTemplate" } file: { url: "https://minio.oinone.top/pamirs/upload/zbh/test/2024/06/03/导出国际化配置模板_1717390304285_1717391684633.xlsx" } } ) { name } } } PS:导入自行修改url进行导入

    2025年2月7日
    40700

Leave a Reply

登录后才能评论