1.0.0 • Published 3 years ago
@released/vue-json-form v1.0.0
vue-json-form
安装
npm i @released/vue-json-form
说明
基于element/ivew的表单二次封装,json数据驱动,动态创建表单
使用
- vue组件中引入 (必须在iview/element组件中使用,先引入iview/element组件库)
import {elmForm} from '@released/vue-json-form' //使用element表单
import {iviewForm} from '@released/vue-json-form' //使用iview表单
- 注册组件使用 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" />
1.0.0
3 years ago