iview+form-create通过json实现复杂表单布局与验证效果代码
代码语言：html
所属分类：表单美化
代码描述：iview+form-create通过json实现复杂表单布局与验证效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iview.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/iview.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/form-create.iview.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/province_city_area.js"></script>
</head>
<body>
<div id="app">
<form-create v-model="fApi" :rule="rule" :option="option" @goods-name-change="change"
/>
</div>
<script type="text/javascript">
var maker = formCreate.maker;
let vm = new Vue({
el: '#app',
data() {
return {
formData: {},
rule: mock(),
fApi: {},
option: {
//显示表单重置按钮
resetBtn: true,
//表单提交事件
onSubmit: function(formData) {
alert(JSON.stringify(formData));
//按钮进入提交状态
vm.fApi.btn.loading();
//重置按钮禁用
vm.fApi.resetBtn.disabled();
//按钮进入可点击状态
// $f.btn.finish();
//创建第二个表单
$f = that.$formCreate(mock, root);
},
mounted: ()=> {
console.log(this.fApi.fields());
this.fApi.setValue({
"goods_name": "fdsfdsfd"
});
}
}
}
},
watch: {
'formData.address': {
handler: function(n) {
console.log(n);
},
deep: true
}
},
methods: {
change: function(...arg) {
console.log(arg);
}
},
mounted: function() {
console.log(this.fApi.formData());
//动态添加表单元素
//$f.append($r, 'pic');
}
});
function mock() {
return [{
type: 'hidden',
field: 'id',
value: '14'
},
{
type: "cascader",
title: "所在区域",
field: "address",
value: ['陕西省',
'西安市',
'新城区'],
props: {
//可选项的数据源，格式参照示例说明
data: province_city_area,
//选择后展示的函数，用于自定义显示格式
renderFormat: label => label.join(' / '),
//是否禁用选择器
disabled: false,
//是否支持清除
clearable: true,
//输入框占位符
placeholder: '请选择',
//次级菜单展开方式，可选值为 click 或 hover
trigger: 'click',
//当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例
changeOnSelect: false,
//输入框大小，可选值为large和small或者不填
size: undefined,
//动态获取数据，数据源需标识 loading
loadData: () => {},
//是否支持搜索
filterable: false,
//当搜索列表为空时显示的内容
notFoundText: '无匹配数据',
//是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
transfer: false,
},
validate: [],
},
{
type: "input",
title: "商品名称",
//label名称
field: "goods_name",
//字段名称
value: "",
//input值,
props: {
"type": "text",
//输入框类型，可选值为 text、password、textarea、url、email、date
"clearable": false,
//是否显示清空按钮
"disabled": false,
//设置输入框为禁用状态
"readonly": false,
//设置输入框为只读
"rows": 4,
//文本域默认行数，仅在 textarea 类型下有效
"autosize": false,
//自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
"number": false,
//将用户的输入转换为 Number 类型
"autofocus": false,
//自动获取焦点
"autocomplete": "off",
//原生的自动完成功能，可选值为 off 和 on
"placeholder": "请输入商品名称",
//占位文本
"size": "default",
//输入框尺寸，可选值为large、small、default或者不设置,
"spellcheck": false,
//原生的 spellcheck 属性
"required": false,
},
validate: [{
required: true,
message: '请输入商品名称',
trigger: 'blur'
},
],
},
{
type: "radio",
title: "是否包邮",
//label名称
field: "is_postage",
//字段名称
value: "0",
//input值,
options: [{
value: "0",
label: "不包邮",
disabled: false
},
{
value: "1",
label: "包邮",
disabled: false
},
{
value: "1",
label: "未知",
disabled: true
},
],
props: {
"type": undefined,
//可选值为 button 或不填，为 button 时使用按钮样式
"size": "default",
//单选框的尺寸，可选值为 large、small、default 或者不设置
"vertical": false,
//是否垂直排列，按钮样式下无效
},
},
{
type: "checkbox",
title: "标签",
//label名称
field: "label",
//字段名称
value: ["1",
"2",
"3"],
//input值,
options: [{
value: "1",
label: "好用",
disabled: true
},
{
value: "2",
label: "方便",
disabled: false
},
{
value: "3",
label: "实用",
disabled: false
},
{
value: "4",
label: "有效",
disabled: false
},
],
props: {
"size": "default",
//多选框组的尺寸，可选值为 large、small、default 或者不设置
},
},
{
type: "switch",
title: "是否上架",
//label名称
field: "is_show",
//字段名称
value: "1",
//input值,
props: {
"size": "default",
//开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。
"disabled": false,
//禁用开关
"trueValue": "1",
//选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
"falseValue": "0",
//没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
},
slot: {
open: "上架",
//自定义显示打开时的内容
close: "下架",
//自定义显示关闭时的内容
},
//slot可以不用配置
},
{
type: "select",
field: "cate_id",
title: "产品分类",
value: ["104",
"105"],
props: {
"multiple": true,
//是否支持多选
"clearable": false,
//是否可以清空选项，只在单选时有效
"filterable": true,
// 是否支持搜索
"size": "default",
//选择框大小，可选值为large、small、default或者不填
"placeholder": "请选择",
//选择框默认文字
"not-found-text": "无匹配数据",
//当下拉列表为空时显示的内容
"placement": "bottom",
//弹窗的展开方向，可选值为 bottom 和 top
"disabled": false,
//是否禁用
},
options: [{
"value": "104",
"label": "生态蔬菜",
"disabled": false
},
{
"value": "105",
"label": "新鲜水果",
"disabled": false
},
],
},
{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20',
new Date()],
//input值, type为daterange,datetimerange value为数组 [start_value,end_value]
props: {
"type": "datetimerange",
//显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
"format": "yyyy-MM-dd HH:mm:ss",
//展示的日期格式
"placement": "bottom-start",
// 日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder": "请选择获得时间",
//占位文本
"confirm": false,
//是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
"size": "default",
//尺寸，可选值为large、small、default或者不设置
"disabled": false,
//是否禁用选择器
"clearable": true,
//是否显示清除按钮
"readonly": false,
//完全只读，开启后不会弹出选择器
"editable": false,
//文本框是否可以输入
},
},
{
type: "TimePicker",
field: "section_time",
title: "活动时间",
value: [],
//input值, type为timerange value为数组 [start_value,end_value]
props: {
"type": "timerange",
//显示类型，可选值为 time、timerange
"format": "HH:mm:ss",
//展示的时间格式
"steps": [],
//下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。
"placement": "bottom-start",
// 时间选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder": "请选择获得时间",
//占位文本
"confirm": false,
//是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
"size": "default",
//尺寸，可选值为large、small、default或者不设置
"disabled": false,
//是否禁用选择器
"clearable": true,
//是否显示清除按钮
"readonly": false,
//完全只读，开启后不会弹出选择器
"editable": false,
//文本框是否可以输入
},
},
{
type: "InputNumber",
field: "sort",
title: "排序",
value: 0,
//input值
props: {
"max": undefined,
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0