Vue ElementUI 表单设计器 代码生成器

界面效果

体验地址

github

gitee(国内)

特色:

1、支持ElementUI组件库,未来会持续添加更多组件库支持。

2、支持多达37种控件,满足各种业务场景。

3、组件配置详细,基本1:1还原了组件库的所有配置,当然,不常用的配置为了界面简洁我们放在了高级设置里。

4、支持各种子表单控件,满足复杂的数据格式。

5、支持生成json逆向渲染表单,json格式完全遵循vue render标准,支持透传属性、事件、插槽等给内部控件,灵活度丝毫不亚于直接生成vue代码。

6、支持直接生成vue代码,不想使用json可以选择这种方式,生成的vue代码无需任何依赖即可运行(富文本控件需要自行安装tinymce-vue,坐标控件需要自行安装vue-baidu-map)。

7、支持导入sql建表语句快速生成表单模板。

8、控件之间组合模式灵活强大。

9、更多请查看我们的网站。

交流群:

QQ:699850713

欢迎大家使用并提出意见,我们会第一时间修复问题。

  • 1
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的 Vue ElementUI 弹窗表单的代码示例: ```html <template> <div> <el-button type="primary" @click="showDialog">弹出表单</el-button> <el-dialog title="表单标题" :visible.sync="dialogVisible"> <el-form ref="form" :model="formData" :rules="formRules" label-width="80px"> <el-form-item label="输入框"> <el-input v-model="formData.input" autocomplete="off"></el-input> </el-form-item> <el-form-item label="下拉框"> <el-select v-model="formData.select" placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, formData: { input: '', select: '' }, formRules: { input: [ { required: true, message: '请输入内容', trigger: 'blur' } ], select: [ { required: true, message: '请选择选项', trigger: 'change' } ] } } }, methods: { showDialog() { this.dialogVisible = true; }, submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,提交表单数据 console.log(this.formData); this.dialogVisible = false; } }); } } } </script> ``` 上述代码中,通过 `el-button` 组件和 `@click` 事件触发弹出表单窗口。表单窗口使用 `el-dialog` 组件实现。表单内容使用 `el-form` 组件和 `el-form-item` 组件实现,包含输入框和下拉框两个表单控件。表单控件的值绑定到 `formData` 对象上,并使用 `formRules` 对表单进行验证。表单提交时,使用 `this.$refs.form.validate` 方法进行表单验证,验证通过后提交表单数据。 希望这个简单的代码示例能够帮助到您。如果您有其他问题或需要更具体的帮助,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值