网站开发服务wordpress 腾讯主题
根据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