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