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