我们的表单解决方案 el-form-renderer

前言

本文将介绍我们的表单解决方案 @femessage/el-form-renderer，展示我们在 Vue 技术栈下，我们是如何处理以下问题的：

• 表单项动态显示或隐藏
• 表单数据联动
• 表单输入/输出数据格式化
• 非常规表单项的处理
• 复杂的表单验证

方案

表单项动态显示或隐藏(hidden)

可以通过 hidden 控制某一表单项的显示或隐藏。

<template>
  <el-form-renderer ref="form" :content="content" />
</template>

<script>
export default {
    
  name: 'hidden',
  data() {
    
    return {
    
      content: [
        {
    
          type: 'select',
          id: 'selected',
          label: '选择项目',
          options: [
            {
    
              label: '项目A',
              value: 'optionA'
            },
            {
    
              label: '项目B',
              value: 'optionB'
            }
          ]
        },
        {
    
          label: '资料',
          type: 'input',
          id: 'data',
          el: {
    
            placeholder: '项目B的具体内容'
          },
          hidden: form => form.selected !== 'optionB' // 如果选择项并非 项目B 则隐藏
        },
      ]
    }
  }
}
</script>

表单数据联动(on)

可以通过 on 来监听 blur , focus 等事件来实现表单联动。

举个例子，填写 fullName 后，自动填充 lastName

<template>
  <el-form-renderer ref="form" :content="content" />