v-show失效&&element时间选择器弹框位置

问题

• 两个都用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>

补充

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