表头字段自定义渲染
作者:
表单中配置masterRender可以实现表头字段的自定义渲染,但是外键字段不能通过masterRender处理。
在MasterRendererController.tsx中有一段代码
const after: IMasterFieldRender[] = [new LinkRender(), new ForeignKeyLinkRender(), new CommonFieldRender()];
外键字段会走到ForeignKeyLinkRender组件,而masterRender只在CommonFieldRender中才有使用。
protected getDisplayOptions(): DisplayOptions {
return {
masterRender: {
['project']: props => {
const LinkDiv = styled.div`
height: 100%;
display: flex;
align-items: center;
padding-left: 8px;
cursor: pointer;
color: var(--primary-500);
text-decoration: underline;
text-underline-position: under;
`
return (
<MSTFormElement
label={props.template.title}
path={'project'}
colspan={1}
disableError={true}
disabled={true}
isRequired={false}
labelResolver={value => value['project']} // value 对应的 path={...}中的值
contentRenderer={() => {
const data = props.form.value.project
return (
<LinkDiv>
<span onClick={async () => {
const hash = appRouterHashManager.generateHash(EN_Project, PageModeEnum.Form, {
mode: BizFormModeEnum.View,
copyId: data.id,
id: data.id,
data: data,
billTypeId: this.formValue.billType.id,
queryStringParams: {
[F_ProjectSchedule_isTemplateBill]: this.isTemplateBill,
},
});
proxyHistory.push(hash)
}}>{data.code}</span>
</LinkDiv>
)
}}
/>
);
},
}
}
}