vue-json-form

安装

npm i @released/vue-json-form

说明

基于element/ivew的表单二次封装，json数据驱动，动态创建表单

使用

1. vue组件中引入 （必须在iview/element组件中使用，先引入iview/element组件库）

import {elmForm} from '@released/vue-json-form'  //使用element表单
import {iviewForm} from '@released/vue-json-form'  //使用iview表单

2. 注册组件使用 form-list属性为数组

<json-form :form-list="Data" :span="24" ref="form"/>

form表单类型

type属性所有的值 | 表单类型（type） | value | | ---------------- | ---------- | | 输入框 | input | | 下拉选择 | select | | 单选 | radio | | 多选 | checkbox | | 级联选择 | cascader | | 日期选择 | datepicker | | 开关 | switch | | 自定义类型 | render |

json数据说明

| name | key | value | rules | arr | style | | -------- | ------------- | -------- | -------- | ---------------------------------------------------------------------------------------- | ------------ | | 提示文字 | 数据绑定的key | 表单的值 | 验证规则 | 需要多个数据源的时候传入的数据（如下拉选择器，统一label为显示文字，value为绑定的值） | 表单项的样式 |

data选项中配置json数据

    [
          {
            name: "render类型",
            key: "render",
            value: "",
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ],
            type: "render",
            render: function (h, item) {
              return h("Input", {
                on: {
                  "on-change": function (val) {
                    item.value = val.target.value
                  }
                },
              });
            }
          },
          {
            name: "下拉选择",
            key: "sel",
            type: "select",
            value: "",
            arr: [
              {
                label: "标签",
                value: "1"
              },
              {
                label: "标签",
                value: "2"
              }
            ],
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ]
          },
          {
            name: "多选",
            key: "check",
            type: "checkbox",
            value: [],
            arr: [
              {
                label: "标签",
                value: "1"
              },
              {
                label: "标签",
                value: "2"
              }
            ],
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ]
          },
          {
            name: "开关",
            key: "switch",
            type: "switch",
            value: [],
            rules: [
              {
                required: true,
                message: "请选择"
             }
            ]
          },
          {
            name: "单选",
            key: "radio",
            type: "radio",
            value: "",
            arr: [
              {
                label: "标签",
                value: "1"
              },
              {
                label: "标签",
                value: "2"
              },
              {
                label: "标签",
                value: "3"
              }
            ],
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ]
          },
          {
            name: "日期",
            key: "datepicker",
            type: "datepicker",
            value: "",
            dateType: "daterange",
            rules: [
              {
                type: "array",
                required: true,
                message: "请输入",
                fields: {
                  0: {
                    type: "string",
                    required: true,
                    message: "请选择起止日期"
                  }
                }
              }
            ]
          },
          {
            name: "级联",
            key: "cascader",
            type: "cascader",
            value: [],
            arr: [
              {
                label: "标签",
                value: "1",
                children: [
                  {
                    label: "标签1",
                    value: "11"
                  }
                ]
              },
              {
                label: "标签",
                value: "2"
              },
              {
                label: "标签",
                value: "3"
              }
            ],
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ]
          },
          {
            name: "输入",
            key: "input",
            value: "",
            style: {
              flexBasis: "400px"
            },
            rules: [
              {
                required: true,
                message: "请输入"
              }
            ]
          }
 ]

获取表单数据

方式1：promise方式

this.$refs.form.validate().then(res=>{
  console.log(res)
})

方式2：回调函数方式

this.$refs.form.validate((valid,res)=>{
    if(valid){
         console.log(res)
    }
})

valid为true表示验证通过 res为最终的表单数据

html中使用

script引入bundle.min 通过全局变量jsonForm.elmForm或者jsonForm.iviewForm注册json-form组件使用

注意

json-form组件可以传入iview/element的Col组件属性用来栅格布局，如span属性 span=12 表示一行显示两列表单项 默认不传span属性 span=24 每个表单项独占一行

<json-form :form-list="Data" :span="12" />