Vue3和ElementPlus实现表单校验、字段的显示/隐藏

背景

填写表单时，有些字段必填，需要加表单规则并校验。业务需求需要呈现随着下拉字段切换时，动态显示不同的字段，需要表单字段的显示和隐藏 功能。

实现方式

• el-form上:rules：绑定表单规则
• el-form-item上prop：绑定表单每一项的key，必须绑定prop，校验才能生效
• el-form-item上加v-show：动态控制某项的显示和隐藏。
  • 如果使用v-if，会出现初次进页面一片空白，没有字段可以显示出来的问题。
  • 如下在表单项的具体内容上使用v-if会出现，虽然内容给不显示了，但是表单左侧lable还在，且这一项还占着空格，很难看！

<el-form-item>
	<el-input v-model="value" v-if="isShow">
</el-form-item>

---

• 自带表单校验函数validate：el-form上绑定ref调用
• el-form上validate-on-rule-change：是否在rules属性改变后立即触发一次验证。如果有多个表单来回切换打开，当第二个表单打开的时候，rules发生了变化，默认自动触发，页面会先报红。

---

1. template实现：

<el-form :model="fieldDialogForm":rules="formRules" ref="fieldDialogFormRef" 
:validate-on-rule-change="false">
  	//isShow标识该字段是否显示，动态切换isShow的值，控制其显示/隐藏
      <el-form-item v-for="(fieldKey, index) in Object.keys(fieldDialogForm)" 
      :key="index" label-width="100" 
      :prop="fieldKey" 
      v-show="fieldsShowFlag.find(item => item.key === fieldKey)?.isShow"> 
      </el-form-item>a
</el-form>

2. fieldDialogForm：表单key-value初始化
   • 作用：实现填写表单key和value的动态绑定。

let fieldDialogForm = reactive({})
//初始话字段
Object.assign(fieldDialogForm, {
      key: '',
      name: '',
      description: ''
    })

4. fieldsShowFlag：定义表单所有字段，
   • 作用：对表单字段key映射的中文名、类型、是否必填、表单提示词、是否显示等属性的定义。

[
    {
        key: 'key',
        value: '字段名',
        type: 'STRING',
        isRequired: true,
        tip: '请输入出参名称，区分大小写',
        isShow: true
    },
    {
        key: 'description',
        value: '描述',
        type: 'STRING',
        isRequired: false,
        tip: '请输入描述',
        isShow: false
    },
    ......
]