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

最新推荐文章于 2023-12-15 22:36:27 发布

蒲公英想养花

最新推荐文章于 2023-12-15 22:36:27 发布

阅读量618

点赞数 1

分类专栏： vue踩坑日记文章标签： elementui 前端 vue.js vue

本文链接：https://blog.csdn.net/qq_37604640/article/details/119322446

版权

vue踩坑日记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了Vue中v-if与v-show指令在时间选择器显示控制上的区别。v-if根据条件渲染或销毁元素及其绑定，而v-show仅切换元素的display属性。通过实例说明了两者在DOM渲染阶段的影响，以及如何结合使用解决实际问题。

摘要由CSDN通过智能技术生成

问题

在这里插入图片描述

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