vebn回显处理(RadioButtonGroup、ApiSelect)

在表格中回显(主要使用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,
  },
  ]

猜你喜欢

转载自blog.csdn.net/qq_44774287/article/details/127054300