vue动态生成<input>

在ElementUI的form组件中存在动态添加<input>的方法
http://element-cn.eleme.io/2.3/#/zh-CN/component/form

image.png

将动态<input>简化后的来看一下

image.png

v-for一个list，通过add方法添加list中的一个个体

<div id="app">

         <el-button type="primary" plain @click="addEl">添加</el-button>

        <el-row>
            <el-col :span="24" v-for="(list,index) in lists">
                <el-row :gutter="20" class="margins">
                    <el-col :span="2">
                        职员{{index+1}}名字
                    </el-col>
                    <el-col :span="6">
                        <el-input type="text" v-model="list.name">
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" @click="del(index)">删除信息</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                tables: [],
                lists: [{
                    name: "",
                }],
            },
            methods: {
                addEl: function() {
                    let cope = {
                        name: "",
                    }
                    this.lists.push(cope);
                },
                del: function(index) {
                    this.lists.splice(index, 1);
                },

            }
        });
    </script>