VForm3低代码表单

1、安装

npm i vform3-builds


import VForm3 from 'vform3-builds'  //引入VForm3库
import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式
app.use(VForm3)  //全局注册VForm3(同时注册了v-form-designe、v-form-render等组件)

2、构建表单

<template>
    <v-form-designer ref="vfdRef" :designer-config="buildForm.config">
      <template #customToolButtons>
        <el-button type="text" @click="saveFormJson">保存</el-button>
      </template>
    </v-form-designer>
</template>

<script setup name="buildForm">
import { ref, reactive, inject } from 'vue';
const vfdRef = ref(null)

// 构建配置
const buildForm = reactive({
  config: {
    languageMenu: false,
    externalLink: false,
    formTemplates: false,
    exportCodeButton: false,
    generateSFCButton: false,
    toolbarMaxWidth: 360,
  }
})

onMounted(() => {
    // 清除之前的表结构
    nextTick(() => {
        vfdRef.value.clearDesigner()
    })
});

const saveFormJson = () => {
  let formJson = vfdRef.value.getFormJson()
  console.log(formJson)
}
</script>
<style lang="scss">
.buildForm {
  .main-header {
    display: none;
  }
}
</style>

3、渲染表单

<template>
    <v-form-render :form-json="formJson" :form-data="formData"  ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">提交表单</el-button>
</template>
<script setup name="buildForm">
import { ref, reactive, inject } from 'vue';
const vFormRef = ref(null)

// 表单结构
const formJson = reactive({ })  
// 表单数据
const formData = reactive({})

const rennderForm = () => {
  // 表结构
  vFormRef.value.setFormJson(res.data)
  nextTick(() => {
    // 表数据
    vFormRef.value.setFormData(newFormData)
  })
}

const submitForm = () => {
  vFormRef.value.getFormData().then(formData => {
    alert(JSON.stringify(formData))
  }).catch(error => {
    // Form Validation failed
    ElMessage.error(error)
  })
}

</script>
<style lang="scss">
.buildForm {
  .main-header {
    display: none;
  }
}
</style>