iview+form-create通过json实现复杂表单布局与验证效果代码-html代码-BFW代码库

代码语言：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可以不用配置
             .........完整代码请登录后点击上方下载按钮下载查看