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

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'
            },
                {
         .........完整代码请登录后点击上方下载按钮下载查看