vue3 ts 动态表单原理

ts 复制代码

<template>
  <div class="form">
    <el-form
      :inline="dynamicForm.inline"
      :label-width="dynamicForm.labelWidth"
      ref="formRef"
      :model="dynamicForm"
    >
      <el-form-item
        v-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: string
  columnLabel: string
  columnType: string
  columnProp: string
  columnWidth: string
  columnValue?: object
  formElement?: string
  optionValue?: string
}
const formRef = ref<FormInstance>()
const formData = ref({})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await 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) return
  props.dynamicForm.columns?.forEach((column) => {
    column.columnValue = new Object()
  })
  formEl.resetFields()
  emit('resetForm')
}

const props = defineProps<{
  dynamicForm: {
    inline: boolean
    labelWidth: string
    columns: FormColumn[]
    buttonEnabled?: boolean
  }
}>()

const emit = defineEmits<{
  (e: 'submitForm', formData: object | undefined): void
  (e: 'resetForm'): void
}>()
console.log(props.dynamicForm.columns)
</script>

使用，数组转对象对象转数组

ts 复制代码

const saveFormCallbak = () => {
  //console.log(saveForm)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const 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-any
  const 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动态添加表单项

ts 复制代码

    <!-- <el-form-item
      v-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> -->