文章目录

问题


  • 两个都用v-if控制显示隐藏，时间选择器弹框位置在左上角
  • 用v-show控制，时间选择器弹框位置正确，但第二个v-show失效

原因分析

  • v-show不能对多个元素生效！？

  • 全部使用v-if，一开始第二个的dom没有渲染，所以选择器弹框找不到定位点，于是相对浏览器窗口定位

  • v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

  • v-show：根据表达式之真假值，切换元素的 display CSS property。

解决

  • 一个使用v-show另一个使用v-if解决这两个问题 
<el-radio-group v-model="dim_radio" size="small">
    <el-radio-button label="月"></el-radio-button>
    <el-radio-button label="区间"></el-radio-button>
</el-radio-group>
<el-date-picker v-show="dim_radio==='月'" v-model="sel_mon" type="month" size="small" placeholder="选择月">
</el-date-picker>
<el-date-picker v-if="dim_radio!=='月'" v-model="sel_mon_range" type="monthrange" size="small" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
</el-date-picker>

补充

  • 后续查到更多的资料将会完善这个问题的分析