根据JSON动态生成表单表格

一. 子组件 DynamicFormTable.vue

1，根据JSON数据动态生成表单表格，支持表单验证

基于vite+element plus + ts 动态生成表格表单，表单支持添加删除行列。

JS部分

1.1，props数据

const props = defineProps({tableTitle: {type: Array<any>,default: () => []},tableData: {type: Array<any>,default: () => []},tableEvent: {type: Array<any>,default: () => []},height: {type: Number,default: null},eventWidth: {type: Number,default: 100}
})

1.2，表单数据和数据监听

const form = reactive({rows: [...props.tableData]
})watch(() => props.tableData, () => {console.log('props.tableData', props.tableData)form.rows = [...props.tableData]
},{deep: true})

1.3，自动验证

const getRules = (column: any, row: any) => {if (column.required) {return [{ required: true, message: `${column.label}不能为空`, trigger: ['blur', 'change'] }]}return []
}

1.4，表单验证

const dynamicFormRef = ref()const validate = () => {return new Promise((resolve, reject) => {dynamicFormRef.value.validate((valid: any) => {if (valid) {resolv