html页面
在v-for循环plans数组,并且绑定值
<div v-for="(item,index) in dataForm.plans">
<el-row>
<h2 style="font-size:20px;padding-left:40px" v-if="index == 0">添加计划信息</h2>
<el-col :span="11">
<el-form-item :prop="'plans.' + index + '.stage'"
:rules="{required: true, message: '项目阶段不能为空', trigger: 'blur'}">
<label slot="label">项目阶段 </label>
<el-select v-model="item.stage" placeholder="请选择" style="width: 100%;"
@change="onChangeStatusOptions"
clearable>
<el-option
v-for="status in statusOptions"
v-show="status.id == item.stage || !selectIds.includes(status.id)"
:key="status.name"
:label="status.name"
:value="status.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="计划开始时间" style="display: inline-block"
:prop="'plans.' + index + '.planStartTime'"
:rules="{required: true, message: '计划开始时间不能为空', trigger: 'blur'}">
<el-date-picker
v-model="item.planStartTime"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width: 200px">
</el-date-picker>
~
<el-form-item style="display: inline-block"
:prop="'plans.' + index + '.planEndTime'"
:rules="{required: true, message: '计划结束日期不能为空', trigger: 'blur'}">
<el-date-picker
v-model="item.planEndTime"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 200px">
</el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label="实际开始时间">
<el-date-picker
v-model="item.actualStartTime"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
style="width: 200px">
</el-date-picker>
~
<el-date-picker
v-model="item.actualEndTime"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 200px">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" style="padding-left: 5%">
<el-form :model="dataForm" :rules="dataRule" ref="" @keyup.enter.native="dataFormSubmit()"
label-width="auto"
label-position="top">
<el-form-item label="推迟原因">
<el-input type="textarea" placeholder="推迟原因" :Rows="5"
v-model="item.delayReasons"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-button v-if="index == dataForm.plans.length-1" style="margin-left: 40px" @click="addPlans()"
type="primary"
round>
添加项目阶段
</el-button>
<el-button style="margin-left: 40px" v-if="index != 0" @click="removePlans(index,item)" round>删除该阶段
</el-button>
<el-divider></el-divider>
<div style="width: 90%;text-align: center">
</div>
</div>
动态添加的下拉列表不能选择同一个值
下拉列表每选择一次触发该方法,把已绑定的值存进selectIds数组。
// 选择阶段操作
onChangeStatusOptions () {
this.selectIds = []
for (const item of this.dataForm.plans) {
if (item.stage) {
this.selectIds.push(item.stage)
}
}
},
v-show 先判断是否是当前选中的值 不是的话 判断如果 selectIds数组中存在该值 则不显示
<el-option
v-for="status in statusOptions"
v-show="status.id == item.stage || !selectIds.includes(status.id)"
:key="status.name"
:label="status.name"
:value="status.id">
</el-option>
追加页面
// 添加计划
addPlans () {
this.dataForm.plans.push({
'stage': '',
'planStartTime': '',
'planEndTime': '',
'actualStartTime': '',
'actualEndTime': '',
'delayReasons': ''
})
},
删除一个追加的页面
// 删除计划
removePlans (index, item) {
this.selectIds.forEach((item1, index1) => {
if (item1 === item.stage) {
this.selectIds.splice(index1, 1)
}
})
this.dataForm.plans.splice(index, 1)
}