低代码表单
实现三个目标
首先讲讲总体思想，所谓的低代码表单就是后端传递一个特殊结构的对象数组，然后确定根据这个对象数组来自动生成表单，这个对象结构可以是这样的:
interface FormItem {
value: "" // 预填
config: { // 配置
field: 0 // 字段类型
validator: '[0-9]{2}' // 正则校验
SelectOptions: ['男','女'] // 选项
placeholder: "xxx" // 需要透传到原生元素节点的html属性
}
}
然后我们定义好每个原子组件，比如Input组件、Select组件等，然后利用vue动态组件来动态地选择渲染哪个组件。在这个过程中，我们定义Form组件，作为一个整体的表单组件，它会接收前面说的对象数组并负责迭代渲染每一个具体的组件，而在Form组件到原生元素节点之间建立一个Field组件，来做为中间层进行一些处理，例如数据处理。
按这种设计思路，组件数据流就是这样的：
如何传递html属性到原生表单元素上？
通过$attrs透传config对象
如何获取每个表单子项的数据到Form组件中并实现数据校验？
在Field组件监听onChange事件可以获取数据，并通过emit(’update:modelValue’) 将数据传递到Form表单组件中。这样的优点是能够实时地获取数据，在某些时候会很有用，但是缺点也有很多：
如果用户不输入任何值，则传递到Form组件的值为空，而不是预填值
因此我们还需要做另外一个方案来弥补这些缺点，并且还能实现校验。
这个方案的思路是通过defineExpose暴露一个校验函数，函数校验成功则返回输入数据，否则返回提示信息。
在用户点击表单提交时可以利用此校验函数进行校验，如果想用户每输入一个表单项就校验的话可以监听onBlur事件。
简易版本完整代码：
// App.vue
<template>
<div>
<div>
<h3>操作区</h3>
<div v-for="(item, index) in operators" :key="index">
<span>{{FieldMap[item.config.field]}}</span>
<button @click="addField(item)">添加</button>
</div>
</div>
<Form :formData="formData" v-model="formValue" />
</div>
</template>
<script setup>
import { reactive, watch, ref } from 'vue';
import { FILES_MAP } from './form/field/fields';
import Form from './form/Form.vue';
const FieldMap = reactive(FILES_MAP)
const operators = [
{
value: '10', // 预填数值
config: {
field: 0, // 类型
type: 'number', // 透传
placeholder: "手机号码", // 透传
validator: '[0-9]{2}' // 校验
}
},
{
value: '女',
config: {
field: 1,
placeholder: "性别",
SelectOptions: ["男", "女"],
}
}
]
const formData = reactive([])
const formValue = ref([]) // 表单各项输入值
watch(formValue, (val)=>{
console.log(val); // 观察数值是否异常
})
function addField(item){
formData.push(item)
}
</script>
// Form.vue
<template>
<div>
// 遍历渲染
<Field v-for="(field, index) in formData" :key="index" :field="field" v-model="formValue[index]" ref="fieldRefs" />
<button @click="submit">提交</button>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import Field from './field/Field.vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
formData: {
type: Array,
default: ()=>[]
}
})
// 数据的值，初始时使用预填值
const formValue = reactive(props.formData.map(item => item.value))
// 在v-for中获取所有的ref
const fieldRefs = ref([])
// 提交时进行校验
function submit(){
const validators = fieldRefs.value.map((fieldRef)=> fieldRef.validate)
Promise.all(validators.map(validate=> validate())).then(res=>{
formValue.splice(0, formValue.length)
formValue.push(...res)
console.log('res',res);
emit('update:modelValue', formValue)
}).catch(err=>{
alert(err)
})
}
</script>
Field组件，包裹元素节点组件，在这里通过动态组件渲染特定的表单元素组件，另外也负责将数据回传会Form组件中。
// Field.vue
<template>
<div>
<component :is="filedCom" v-bind="field.config" :value="field.value" @change="onChange" ></component>
</div>
</template>
<script setup>
import { computed, toRef,ref } from '@vue/reactivity';
import { FIELDS_COMPONENTS, FILES_MAP } from './fields';
// v-model 绑定
const emit = defineEmits({
"update:modelValue": String
})
const props = defineProps(['field'])
const filed = toRef(props, 'field')
// 用户输入的数值，初始化时使用预填值
const value = ref(props.field.value)
// 根据field字段选择组件
const filedCom = computed(()=> FIELDS_COMPONENTS[FILES_MAP[filed.value.config.field]])
function onChange(e){
value.value = e.target?.value || ''
emit("update:modelValue", value.value)
}
// 定义校验函数，校验函数不仅仅起到校验作用，还要传递数据
async function validate(){
const validator = filed.value.config?.validator
if(validator){
if(new RegExp(validator).test(value.value)){
return value.value
}else{
return Promise.reject("错误提示消息")
}
}
return value.value
}
defineExpose({validate})
</script>
field文件，保存组件映射。
// field.js
import InputCom from "../components/input.vue"
import SelectCom from "../components/select.vue"
// 表单组件映射
export const FIELDS_COMPONENTS = {
'INPUT': InputCom,
"SELECT": SelectCom
}
// field字段映射，和后端约定好有哪些类型
export const FILES_MAP = {
0: 'INPUT',
1: 'SELECT'
}
原生表单组件，可以通过css美化样式，可以根据不同的元素类型做一些特定的处理。
// input.vue
<template>
<input />
</template>
// select.vue
<template>
<select>
<option v-for="item in $attrs.SelectOptions" :key="item">{{
item
}}</option>
</select>
</template>
实现无限嵌套
实现无限嵌套是指表单子项里嵌套着另一个表单，例如新加一个表格类型，表格类型可以渲染输入框、多选框，甚至也可以再渲染表格类型。
实现的思路也不难，首先约定好表格类型的field值，假设是3，然后我们在config字段里加上一个新字段fields，它只在表格类型时有效，fields实际上也是一个FormItem对象数组，然后fields数组中又可以嵌套表格类型，如此形成无限嵌套。
在组件上，可以利用递归处理这种嵌套情况，可以递归Form表单组件，也可以递归Field字段组件。具体这里不展开讲
小结
上面的实现比较简单，只实现了文本输入框和多选框，实际中要处理的情况更复杂，不过有了思路后面的组件扩展也比较简单。
需要注意的是，defineExpose暴露函数时，函数的返回值如果是reactive或者ref，那么就会将响应式传递到父组件中，这不符合单向数据流的思想，并且会导致项目变得难以维护，最好是先消除响应式再传递数据，简单的解决思路是：
return data.value //ref
return JSON.parse(JSON.stringify(toRaw(data))) // reactive
toRaw函数会返回reactive的原始对象，但是不建议直接操作原始对象，最好使用深拷贝拷贝出一个新的对象进行操作，最简单的深拷贝就是使用JSON。更多细节见Vue组件通讯
动态表单
所谓的动态表单，是指在多表单系统（一个页面多个表单）中，用户输入某个字段达到一定条件时可以影响另一个表单，举个例子，例如第一个表单的select选项框选择男时，另一个表单的输入框placeholder显示先生你好，如果是女则显示女生你好。
实现起来并不难，因为我们前面已经实现了Form组件的v-model ，这里需要注意的是设计思路应该是自上而下的，因为单向数据流更容易维护。
解决思路是在两表单上增加一个逻辑层，然后监听表单的数据，当达到要求条件时操作FormItem.config配置对象来实现改变表单结构的目的。
// App.js
<Form :formData="formData" v-model="formValue" />
<Form :formData="formData" v-model="formValue" />
// Field中监听change事件，当change时也向上传数据
<Field v-for="(field, index) in formData" :key="index" :field="field" @change="submit"
v-model="formValue[index]" ref="fieldRefs" />
// App.js
const formData = reactive([{
value: '',
config: {
field: 1,
placeholder: "性别",
SelectOptions: ["男", "女"],
}
}])
const formValue = ref([])
const formData2 = reactive([{
value: '', // 预填数值
config: {
field: 0, // 类型
type: 'number',
placeholder: "手机号码", // 透传
validator: '[0-9]{2}'
}
},])
const formValue2 = ref([])
watch(formValue, ([val]) => {
if(val === '男'){
formData2[0].config.placeholder = "先生你好"
}else {
formData2[0].config.placeholder = "女士你好"
}
})
代码示例
PlayCode - Javascript Playground