vue循环生成el-form-item时,绑定值的写法
程序员文章站
2024-02-19 10:57:46
...
先来效果图
需求:每加一个场次新增一场活动,并添加验证规则
关键代码部分:
<el-form-item label="活动场次" prop="roundTimeList">
<el-button type="primary" icon="el-icon-plus" @click="addSession">添加活动场次</el-button>
</el-form-item>
<div v-for="(item,index) in formParams.roundTimeList" :key="index">
<el-form-item
:label="`活动场次${index+1}`"
:prop="`roundTimeList[${index}].timeRange`" `<————关键代码`
:rules="formRules.roundTimeList0"
>
<el-time-picker
is-range
v-model="item.timeRange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm:ss"
style="margin-right:10px"
:clearable="true"
></el-time-picker>
<el-button type="danger" icon="el-icon-minus" circle @click="delSession(index)"></el-button>
</el-form-item>
</div>
formParams: {
roundTimeList: [],
},
formRules: {
roundTimeList: [
{ required: true, message: "请添加场次", trigger: "blur" }
],
roundTimeList0: [
{ required: true, message: "请选择场次时间", trigger: "change" }
]
}
methods:{
addSession() {
let obj = {
id: null,
startTime: "",
endTime: "",
timeRange: ["00:00:00", "23:59:59"]
};
if (this.formParams.roundTimeList.length < 10) {
this.formParams.roundTimeList.push(obj);
} else {
this.$message.warning(`最多添加${this.roundTimeList.length}场`);
}
},
delSession(index) {
this.formParams.roundTimeList.splice(index, 1);
},
}
注意
: 使用el-time-picker,时间范围选择时,绑定的初始值timeRange不能给空数组[], 给空数组的话会无法选中时间的bug
上一篇: 文件分片上传及断点续传