在日常开发中，我们经常会遇到需要根据业务规则动态展示字段样式的场景，比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例，带大家实现这一功能。
以下以 自定义表格字段文字颜色 为例。
实现步骤
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低代码应用平台体验
