根据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