当前位置：首页 > news >正文

根据JSON动态生成表单表格

news 来源：原创 2025/5/1 2:20:00

根据JSON动态生成表单表格

一. 子组件 DynamicFormTable.vue
- 1，根据JSON数据动态生成表单表格，支持表单验证
- JS部分
- - 1.1，props数据
  - 1.2，表单数据和数据监听
  - 1.3，自动验证
  - 1.4，表单验证
  - 1.5，获取表单数据
  - 1.6，事件处理
  - 1.7，暴露方法给父组件
- 2，HTML部分
二，父组件
- 1，模拟数据
- 2，部分事件

一. 子组件 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