Vue 表单神器（助你快速开发一臂之力）

vue-ele-form 是基于element-ui form 的二次封装

特点有如下几点：

内置 20 多种表单类型, 包括选单选、多选、标签、级联选择器等;
拥有上传图片增强, 上传视频增强, 上传文件增强,树形下拉选择框, 富文本，表格编辑器, 动态表单, markdown, 地图, 代码编辑器, json 编辑器等丰富的第三方扩展，满足你的更多需求;
配备可视化生成表单工具;
内置表单校检;
表单布局和响应式表单;
表单分组;
联动显示/隐藏、启用/禁用、重新获取 options 值
可以通过插槽自定义表单项;
支持国际化;
一键 Mock模拟数据;

安装

npm install vue-ele-form --save
或
yarn add vue-ele-form

引用

import EleForm from 'vue-ele-form'Vue.use(EleForm)

文档

<!--* @Description: * @Author: liangchen* @Date: 2022-04-28
-->
<template><div class="ele"><el-card header="ele-form演示"  style="max-width:1200px;margin: 50px auto;"><ele-form v-model="formData" :form-desc="formDesc" :request-fn="handleSubmit" :rules="rules" @request-success="handleSuccess"></ele-form></el-card></div>
</template>
<script>
export default {name: 'ele',data() {return {formData: {},formDesc: {title: {type: 'input',label: '标题',required: true // 必填简写},content: {type: 'textarea',label: '内容',required: true // 必填简写},type: {type: 'radio',label: '类型',default: 1,options: [{ text: '自制', value: 1 },{ text: '转载', value: 0 }]},category: {type: 'cascader',label: '分区',options: [{value: 'dongman',label: '动漫',children: [{ value: 'dongmanzatan', label: '动漫杂谈' },{ value: 'donghuajishu', label: '动画技术' },{ value: 'dongmanzixun', label: '动漫资讯' }]},{value: 'biancheng',label: '编程',children: [{ value: 'vue', label: 'Vue' },{ value: 'css', label: 'CSS' },{ value: 'html', label: 'HTML' },{ value: 'js', label: 'JavaScript' }]}]},label: {type: 'tag',label: '标签',options: [{value: 'one',label: '标签1',},{value: 'two',label: '标签2',},{value: 'three',label: '标签3',},{value: 'four',label: '标签4',},{value: 'five',label: '标签5',},{value: 'six',label: '标签6',}]}},rules: {title: { required: true, message: '必须填写标题' },label: { required: true, message: '标签必须填写标题' }}}},methods: {handleSubmit(data) {// eslint-disable-next-line no-consoleconsole.log(data)//   return Promise.reject()   // 如果返回此类型  handleSuccess不会执行return Promise.resolve()   // 如果返回此类型  handleSuccess会执行},handleSuccess() {this.$message.success('创建成功')}}
}
</script>
<style scoped>
</style>

Vue 表单神器（助你快速开发一臂之力）相关推荐

基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
一个很好用的vue表单工具，快速进行表单开发
一个很好用的vue表单插件,已拖动的形式,快速的构建表单,可以对表单数据设置,是否必填,校验等操作,设置完成后,可以选择表单已哪种方式呈现(页面 or 弹窗) 插件地址: https://mrhj.g ...
多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
什么表单设计工具能快速提升办公效率？
在信息化快速发展的年代,谁能掌握更先进的技术,谁就能拥有更广阔的发展前景.在以前的办公环境中,传统的表单制作工具占据了主流地位,随着办公自动化的快速发展,传统表单工具的弊端也暴露出来了,采用更先进的表 ...
VUE 表单input 框使用@blur事件
** VUE 表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 form表单代码 <el-form-item label="身份证号码:" ...

Vue 表单神器（助你快速开发一臂之力）

Vue 表单神器（助你快速开发一臂之力）相关推荐

最新文章

热门文章

Vue 表单神器 （助你快速开发一臂之力）

Vue 表单神器 （助你快速开发一臂之力）相关推荐

最新文章

热门文章

Vue 表单神器（助你快速开发一臂之力）

Vue 表单神器（助你快速开发一臂之力）相关推荐