vue3 + ant-design-vue 可视化表单 表单代码生成

可视化表单生成: 利用可视化平台快速生成基于and-design-vue的表单代码快乐摸鱼.快速生成调查问卷表单页面icon-default.png?t=O83Ahttps://gitee.com/xujiaqi1833/form-code-generate-antd

预览地址:表单编辑器icon-default.png?t=O83Ahttp://112.124.46.62/

目前已经完成了表单基本字段的配置设置

包括双向绑定变量名配置、各表单字段key配置、表单模式配置。

代码生成预览也已经完成。后续将继续完善表单复杂逻辑校验配置,以及完善表单可配置的选项。

附上生成的代码:

<template>
  <a-form v-model="info" :rules="rules" layout="vertical">
    <a-form-item label="年龄" name="age">
      <a-input
        placeholder="请输入内容"
        :min="0"
        :max="120"
        v-model:value="info.age"
        type="number"
      >
      </a-input>
    </a-form-item>
    <a-form-item label="姓名" name="name">
      <a-input placeholder="请输入姓名" v-model:value="info.name"> </a-input>
    </a-form-item>
    <a-form-item label="爱好" name="lovely">
      <a-textarea placeholder="请输入爱好" v-model:value="info.lovely">
      </a-textarea>
    </a-form-item>
    <a-form-item label="出生日期" name="birthday">
      <a-date-picker placeholder="请选择出生日期" v-model:value="info.birthday">
      </a-date-picker>
    </a-form-item>
  </a-form>
</template>
<script steup>
import { ref } from "vue";
const info = ref({
  age: undefined,
  name: undefined,
  lovely: undefined,
  birthday: undefined
});
const rules = ref({
  age: [{ required: true, message: "请输入年龄" }],
  name: [{ required: true, message: "请输入姓名", type: "string" }],
  lovely: [{ required: false, message: "请输入", type: "string" }],
  birthday: [{ required: true, message: "请选择日期" }],
});
</script>

效果也是很不错的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值