<template><div class="form"><el-form:inline="dynamicForm.inline":label-width="dynamicForm.labelWidth"ref="formRef":model="dynamicForm"><el-form-itemv-for="(column, index) in dynamicForm.columns":key="column.columnName + '.' + index":label="column.columnLabel":prop="column.columnProp"><el-input v-model="column.columnValue" /></el-form-item><el-form-item v-if="dynamicForm.buttonEnabled"><el-button type="primary" @click="submitForm(formRef)"> 查询 </el-button><el-button @click="resetForm(formRef)">重置</el-button></el-form-item></el-form></div>
</template>
<style lang="css"></style>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
interface FormColumn {columnName: stringcolumnLabel: stringcolumnType: stringcolumnProp: stringcolumnWidth: stringcolumnValue?: objectformElement?: stringoptionValue?: string
}
const formRef = ref<FormInstance>()
const formData = ref({})const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {//console.log('submit!')//console.log(props.dynamicForm)console.log(formEl)console.log(JSON.stringify(formEl.fields))console.log(formData)emit('submitForm', props.dynamicForm)} else {console.log('error submit!', fields)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnprops.dynamicForm.columns?.forEach((column) => {column.columnValue = new Object()})formEl.resetFields()emit('resetForm')
}const props = defineProps<{dynamicForm: {inline: booleanlabelWidth: stringcolumns: FormColumn[]buttonEnabled?: boolean}
}>()const emit = defineEmits<{(e: 'submitForm', formData: object | undefined): void(e: 'resetForm'): void
}>()
console.log(props.dynamicForm.columns)
</script>使用，数组转对象 对象转数组
const saveFormCallbak = () => {//console.log(saveForm)// eslint-disable-next-line @typescript-eslint/no-explicit-anyconst arr: any[][] = []saveForm.columns.forEach((colunm: FormColumn) => {arr.push([colunm.columnName, colunm.columnValue])})const obj = Object.fromEntries(arr)// console.log(obj)save(obj).then(() => {loadDataPage()}).finally(() => {saveFormVisible.value = false})
}
const updateFormCallbak = () => {//console.log(updateForm)// eslint-disable-next-line @typescript-eslint/no-explicit-anyconst arr: any[][] = []updateForm.columns.forEach((colunm: FormColumn) => {arr.push([colunm.columnName, colunm.columnValue])})const obj = Object.fromEntries(arr)//console.log(obj)update(obj.id, obj).then(() => {loadDataPage()}).finally(() => {updateFormVisible.value = false})
}
参考element-plus动态添加表单项
<!-- <el-form-itemv-for="(domain, index) in dynamicValidateForm.domains":key="domain.columnName":label="domain.columnLabel":prop="'domains.' + index + '.value'":rules="{required: true,message: 'domain can not be null',trigger: 'blur',}"><el-input v-model="domain.value" /><el-button class="mt-2" @click.prevent="removeDomain(domain)"> Delete </el-button></el-form-item> -->
