vue中form表单动态添加行

实现效果：
 

代码：

<el-row v-for="(item, index) in ruleForms.items">
    <el-form
        :inline="true"
        :model="ruleForms.items[index]"
        :rules="rules"
        ref="ruleForms"
        label-width="100px"
        class="demo-form-inline"
        size="small"
    >
        <el-form-item label="播放时间" prop="date">
            <el-date-picker
                v-model="ruleForms.items[index].date"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format=" yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :default-time="['00:00:00']"
            ></el-date-picker>
        </el-form-item>

        <el-form-item label="应用" prop="app">
            <el-select
                v-model="ruleForms.items[index].app"
                placeholder="请选择应用"
                @change="getMaterial"
            >
                <el-option
                    v-for="item in apps"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="素材包" prop="material" size="small">
            <el-select
                v-model="ruleForms.items[index].material"
                placeholder="请选择素材包"
            >
                <el-option
                    v-for="item in materials"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button
                v-if="index!=0"
                type="danger"
                @click="del(index)"
                size="small"
            >删除</el-button>
            <el-button
                v-if="index == 0"
                type="success"
                @click="addItem"
                size="small"
            >新增</el-button>
        </el-form-item>
    </el-form>
</el-row>

 

data() {
    return {
        startTime: '',
        endTime: '',
        ruleForms: { items: [{}] },
    };
},
methods: {
    addItem() {
        // this.i += 1;
        this.ruleForms.items.push({
            date: '',
            material: '', //素材包
            app: ''
        });
        // console.log(this.i);
    },
    // 删除播放时间
    del(index) {
        this.ruleForms.items.splice(index, 1);
    }
},

其中的应用apps和素材包materials部分的数据由后台接口获取动态添加到select中，方法详见https://blog.csdn.net/DZY_12/article/details/101295167