更新记录

1.0.1（2025-01-21） 下载此版本

1.0.1 组件初始化（支持json渲染表单，表单内容修改回传、必填项配置...）

1.0.0（2025-01-21） 下载此版本

1.0.0 组件初始化

平台兼容性

wangzy-dynamicForm

vue3 动态表单组件，基于 uniapp 开发，样式需要 sass 支持

组件说明

这是一个灵活的动态表单组件，支持多种输入类型，包括文本输入、选择器和日期时间选择等。

安装

在 uni_modules 目录下导入该组件。

基本使用

<template>
  <wangzy-dynamicForm :formConfig="formConfig" v-model:formData="formData" @onChange="handleChange" />
</template>

属性说明

表单配置项说明

每个配置项支持以下属性：

{
  type: String,       // 输入类型：'input'/'select'/'datetime'
  field: String,      // 字段名
  label: String,      // 标签文本
  required: Boolean,  // 是否必填
  placeholder: String,// 占位文本
  disabled: Boolean,  // 是否禁用
  showClear: Boolean, // 是否显示清除按钮
  hidden: Boolean,    // 是否隐藏
  // input类型特有属性
  inputType: String,  // 输入框类型
  maxLength: Number,  // 最大长度
  // select类型特有属性
  options: Array,     // 选项数组
  rangeKey: String,   // 选项标签键名
  // datetime类型特有属性
  format: String,     // 日期格式，默认'yyyy-MM-dd'
  ranges: Array       // 时间选择范围
}

事件

示例

const formConfig = [
  {
    type: 'input',
    field: 'name',
    label: '姓名',
    required: true,
    placeholder: '请输入姓名',
  },
  {
    type: 'select',
    field: 'gender',
    label: '性别',
    options: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
    ],
    placeholder: '请选择性别',
  },
  {
    type: 'datetime',
    field: 'birthday',
    label: '生日',
    format: 'yyyy-MM-dd',
    placeholder: '请选择日期',
  },
];