在表格中回显(主要使用customRender函数)
1.在BasicColumn中
其中record是表格的数据(调用接口的返回值)
export const columns: BasicColumn[] = [
{
title: '入账状态',
dataIndex: 'accountStatus',
width: 200,
customRender: ({
record }) => {
const status = record.accountStatus;
let color = '';
let text = '';
if (status === 1) {
color = 'green';
text = '已入账';
} else if (status === 0) {
color = 'yellow';
text = '未入账';
} else {
color = 'red';
text = '未支付';
}
return h(Tag, {
color: color }, () => text);
},
},
]
2.在FormSchema中
组件采用RadioButtonGroup
注意这里的value的值的类型要和后端返回的类型一致
比如后台返回字符1那么这里对应的value:‘1’
export const formSchema: FormSchema[] = [
{
field: 'isRoute',
label: '是否跳转',
component: 'RadioButtonGroup',
required: true,
defaultValue: '1',
componentProps: {
options: [
{
label: '是', value: 1 },
{
label: '否', value: 0 },
],
},
},
{
field: 'wechatMenuId',
label: '微信菜单',
/*这里需要后台返回一个名为wechatMenuId的列表(内容为wechatId的值)就可以实现回显*/
component: 'ApiSelect',
componentProps: {
mode: 'multiple',
api: GetWechatAllList,
labelField: 'wechatMenuName',
valueField: 'wechatId',
},
},
]
效果图如下:
在Drawer 抽屉组件中回显(主要使用render)
curVal为当前抽屉的值
export const refundSchema: DescItem[] = [
{
field: 'feedbackStatus',
label: '状态',
render: (curVal) => {
if (curVal == 0) {
return createVNode('span', {
style: 'color: red' }, '处理中');
} else if (curVal == 1) {
return createVNode('span', {
style: 'color: green' }, '已处理');
} else {
return createVNode('span', {
style: 'color: green' }, '已关闭');
}
},
contentMinWidth: 250,
},
]