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-console
      console.log(data)
      //   return Promise.reject()   // 如果返回此类型  handleSuccess不会执行
      return Promise.resolve()   // 如果返回此类型  handleSuccess会执行
    },
    handleSuccess() {
    
    
      this.$message.success('创建成功')
    }
  }
}
</script>
<style scoped>
</style>