更新记录

1.0.4（2024-08-13） 下载此版本

修改了FormRules的引用

1.0.3（2024-08-12） 下载此版本

修改了表单的显隐规则，以及表单的处理逻辑

1.0.2（2024-08-11） 下载此版本

修改了引入hooks的bug

平台兼容性

v-formcreate

基于wot design uni表单开发的动态表单组件，根据特定数据结构展示表单，并返回表单保存后的内容

开始

1. 引入wot design uni组件库

2. 安装此插件

FromCreate 表单

表单组件渲染需要传递模版 id，渲染表单内容需要传递表单 id

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const formRef = ref<any>()

// 获取表单模板
function setFormTemplate() {
  uni.request({
    url: '/api/v1/sheet_template/customer/template_detail',//接口请求
    success: (res: any) => {
      formRef.value.initData(res.data.data.detail, res.data.data.rules) //初始化表单模板
    },
  })
}

// 校验表单并返回数据
function handleSubmit() {
  formRef.value.validate() //校验数据
}

// 后续业务处理
function handleSuccess(form: RuleFormData) {
  console.log('保存成功，表单数据为：', form)
}
</script>

<template>
  <view style="padding: 50rpx"><wd-button @click="setFormTemplate" block>渲染表单模板</wd-button></view>
  <!-- 动态表单 -->
  <v-formcreate ref="formRef" @success="handleSuccess" />
  <view style="padding: 50rpx"><wd-button type="success" @click="handleSubmit" block>提交</wd-button></view>
</template>

<style scoped></style>

Emits

Exposes