案例

选择生产日期，有效期自动显示为19天后；

代码

这个日期是在一个table里面，按照table的格式来写；

<table>
<tr>
<td><span>生产日期</span></td>
<td>
<el-date-picker 
class="el-select"				
v-model.trim="manufactureDate"
placeholder="请选择生产日期"
type="date"
value-format="yyyy-MM-dd"
@change="changeDate"
:picker-options="pickerOptions"
></el-date-picker>
</td>
<td><span>有效期</span></td>
<td>
<el-date-picker 
class="el-select"				
v-model.trim="validDate"
placeholder="请选择有效期"
type="date"
value-format="yyyy-MM-dd"
@change="changeDate"
:picker-options="pickerOptions2"
>
</el-date-picker>
</td>
</tr>
</table>

上面有一行关键的代码是@change="changeDate",他是双方联动的方法；当生产日期有变化，会触发changeDate事件；
这个事件的具体内容；

changeDate(){
  if(this.currentSKU.skuValid){
    this.validDate = moment(this.manufactureDate)
    .add(thiscurrentSku.skuValid -1,'days')
        .format('YYYY-MM-DD')
  }
}

其中打印出来this.currentSKU.skuValid的值为20；
打印出来的this.manufactureDate为2022-09-09;
有效期的值等于，现在的生产日期加上19，在格式化为YYYY-MM-DD;

日期联动：输入生产日期，有效日期自动显示。

案例

代码