vue中form表单动态添加行
实现效果:代码:<el-row v-for="(item, index) in ruleForms.items"><el-form:inline="true":model="ruleForms.items[index]":rules="rules"ref="ruleForms"...
·
实现效果:
代码:
<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
更多推荐
已为社区贡献5条内容
所有评论(0)