本文链接：https://blog.csdn.net/qq_39159076/article/details/100015203

LayUI形式的动态表单见博文LayUI+JavaScript生成动态表单及提交
Vue+Element-UI效果如下：
在这里插入图片描述
引入文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue+Element生成动态表单并提交</title>
    <!-- 引入Jquery -->
    <script type="text/javascript" src="../../js/jquery-1.9.0.min.js" ></script>
    <!-- getURL方法 -->
    <script src="../../js/url.js"></script>
    <!-- 引入Vue -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element-UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element-UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .user_left{ width:45%; float: left; margin:20px 0 0 5%; }
    </style>
</head>

Element-UI+Vue使用

<body>
<div id="test">
    <el-form id="addForm" label-width="80px">
        <div class="user_left">
        
        	<!-- 固定input -->
            <el-form-item label="节目名称">
            	<!-- 绑定值title，输入框发生改变，title随之改变 -->
                <el-input v-model="title"></el-input>
            </el-form-item>
            
            <!-- 动态input生成,遍历list-->
            <div  v-for="item in list">
                <el-form-item :label="item.propertyShow">
                    <el-input v-model="item.pvalue" :placeholder="item.propertyTips"></el-input>
                </el-form-item>
            </div>
            
            <!-- 按钮 -->
            <el-form-item>
            	<!-- 提交按钮，点击触发submitForm()方法 -->
                <el-button type="primary" @click="submitForm()" round>确认添加</el-button>
                <!-- 清空表单 -->
                <el-button @click="resetForm()" round >重置</el-button>
				
				<!-- 删除了查看所有节目按钮 -->
				
            </el-form-item>
        </div>
    </el-form>
</div>

Vue

<script>
    new Vue({
        el:'#test',
        data() {
            return {
                list:[],
                title: ''
            }
        },
        //界面初始化时调用created，这里加载界面需要的input属性
        created: function() {
            var url = getURL("properties");
            var _this = this;
            //发起请求
            $.get(url, function (result) {
                var data = eval(result);
                var lists=[]
                for (var i=0;i<data.length;i++){
                    var obj=data[i]
                    obj.pvalue = '';
                    lists.push(obj)
                }
                //将结果赋值给上面的list，这样才能生成input
                _this.list = lists;
            })
        },
        methods:{
            getList() {
                window.location.href=getURL('pages/vue/list.html')
            },
            submitForm() {
                var _this = this;
                var list = this.list
                if (_this.title == '') {	//自行校验
                    _this.$alert('请输入节目名称', '提示', {
                        confirmButtonText: '确定'
                    })
                } else {
                    var data = {    //处理参数
                        title:_this.title
                    }
                    for (var i=0;i<list.length;i++) {	//表单数据需要从各绑定值获取
                        var obj = list[i]
                        data[obj.propertyName] = obj.pvalue
                    }
					//提交表单
                    $.post(getURL("insert"),data, function (data) {
                        _this.$alert(data);
                        if (data == 'success') {    //清空表单
                            _this.resetForm()
                        }
                    })
                }
            },
            resetForm() {//清空表单，由于表单没有标准的对象，不能使用this.$refs[formName].resetFields();
                var _this = this;
                var list = this.list
                _this.title = '';
                for (var i=0;i<list.length;i++) {
                    var obj = list[i]
                    obj.pvalue = ''
                }
            }
        }
    });
</script>
</body>
</html>

property请求的List结果如下：

[
    {
        "id": 2, 
        "propertyName": "actors", 
        "propertyShow": "演员", 
        "propertyTips": "演员"
    }, 
    {
        "id": 3, 
        "propertyName": "points", 
        "propertyShow": "评分", 
        "propertyTips": "0-10分"
    }, 
    {
        "id": 9, 
        "propertyName": "desc", 
        "propertyShow": "简介", 
        "propertyTips": "节目简介"
    }, 
    {
        "id": 13, 
        "propertyName": "shuxing", 
        "propertyShow": "属性", 
        "propertyTips": "123"
    }
]