vben: 关于表单组件 InputNumber 无法使用 renderComponentContent 的解决方法

1. 业务要求

• 提交几组数字类型的表单，且表单项带单位，例如：‘m’, ‘kg/m³’；
• 单位位置和其它页面的表单一样，在表单项里面

2.编码过程

• 开始我使用的 ‘addonAfter’ 属性，实现效果如下
  
• 查看其他同事写的代码发现，使用的是 ‘renderComponentContent()’ 方法，实现效果如下
  

3.问题

• 我发现加上该方法后并不生效

	{
      field: 'form1.field1',
      label: 'label1',
      component: 'InputNumber',
      colProps: { span: 8 },
      componentProps: {
        // addonAfter: 'mm',
        disabled: true,
      },
      renderComponentContent: () => {
        return {
          suffix: () => 'mm',
        };
      },
      required: true,
    },

• 查看元素后发现，suffix 根本没有渲染，仔细观察同事和 demo 的代码，使用的都是 Input 组件

4.解决问题

• 都改成 Input 组件，然后单独加上数字正则校验
• 实现代码如下

	{
	  field: 'form1.field1',
      label: 'label1',
      component: 'Input',
      colProps: { span: 8 },
      renderComponentContent() {
        return {
          suffix: () => 'km',
        };
      },
      rules: [
        { required: true },
        {
          pattern: /^[\\-]?[1-9]?[0-9]+(\.[0-9]*)?$/g,
          message: '请输入数字',
          trigger: 'change',
        },
      ],
   },

5.其他问题

• 改为 Input 类型后，使用接口返回的数值为表单赋值，报 required 校验错误，猜测是因为赋值的是数字而不是字符串的原因，赋值前循环 value + ‘’。