Javascript json动态生成表单_根据json生成自定义表单-优快云博客

本文链接：https://blog.youkuaiyun.com/kingrome2017/article/details/82983328

本文介绍如何在基于iview的项目中，利用form-create库动态地根据JSON数据生成表单，实现后台系统的可视化界面，尽管elementui广泛应用，但iview的美学体验在后台场景中更具优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSON.stringify(mock,null,4).toString()格式化json格式在页面输出，这个form-create是一个开源框架
/*! form-create v1.3 | github https://github.com/xaboy/form-create | author xaboy */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form-create-preview示例</title>

    <link href="../../../static/iview/styles/iview.css" rel="stylesheet">
    <script src="../../../static/vue/vue.min.js"></script>
    <script src="../../../static/iview/iview.min.js"></script>

    <!--省市区三级联动json数据-->
    <script src="./form-create.min.js"></script>
    <style>
        .container{
            width: 1300px;
            overflow: hidden;
            margin: 0 auto;
        }
        .jsonBox,.formCreate{
            overflow: auto;
            width:100%;
            resize: none;
            margin-top: 20px;
            height:600px;
            border:1px solid #666;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        button{
            width: 100%;
            height: 40px;
            line-height: 40px;
            border:none;
            font-size: 16px;
            outline:none;
            color: #fff;
            cursor: pointer;
            background:#2d8cf0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="fl" style="width:50%">
            <textarea class="jsonBox" id="jsonBox" v-model="model"></textarea>
        </div>
        <div class="formCreate fr" id="formCreate" style="width:50%"></div>
        <button @click="markHtml">生成html</button>
    </div>
</div>
<script>
    // 定义模板
    let mock = [
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name1",//字段名称
            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,
            }
        },
        {
            type:"input",
            title:"商品名称",//label名称
            field:"goods_name2",//字段名称
            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,
            }
        }
    ];
    //定义模板数据
    let mockData = [
        {
            field:'goods_name1',
            newField:'goods_name01',
            value:'商品01'
        },
        {
            field:'goods_name2',
            newField:'goods_name02',
            value:'商品02'
        },
        {
            field:'goods_name3',
            newField:'goods_name03',
            value:'商品03'
        }
    ]
    vm = new Vue({
        el:'#app',
        cus:'foo',
        data:{
            model:JSON.stringify(mock,null,4).toString()
        },
        methods:{
            markHtml(){
                this.model = this.model?this.model:this.mocks;
                if(!this.model){
                    return alert('请输入要生成的json数据')
                }
                model = JSON.parse(this.model);
                window.formData = {};
                let root = document.getElementById('formCreate');
                $f = this.$formCreate(model,{
                    el:root,
                    submitBtn:false
                });
                $f.model(formData);
                console.log(formData,'formData')
                mock.forEach(items=>{
                    mockData.forEach(item=>{
                        if(items.field==item.field){
                            console.log(item)
                            $f.set(formData[item.field],'value',item.value);
                        }
                    })
                })
            },
        }
    });
</script>
</body>
</html>