element-ui的时间选择器的小坑

最新推荐文章于 2025-07-10 13:24:12 发布

热心市民小胖纸

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：工具使用方法 css html vue 小白问题 element-ui的时间问题文章标签： element日期选择问题日期选择器的小坑

本文链接：https://blog.youkuaiyun.com/weixin_38242293/article/details/82835166

工具使用方法同时被 3 个专栏收录

20 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

小白问题

10 篇文章

订阅专栏

本文解决Vue中日期选择器在复杂页面层级显示及关闭事件触发的问题，通过设置popper-class提升层级并利用@close方法实现弹窗关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要的做一个日期选择框在已有页面上

第一个问题:页面上已经存在了很多层级，但是我们需要显示在最上面，需要加一个类名把层级设置为最大，这个时候的需要用的属性“popper-class”。由于之前很多属性类似于“key”这种，都是需要v-bind:或“:”的所以，最后找了一会发现，这个属性直接就可以，不需要v-bind:或者“:”。直接使用即可。
第二个问题就是，上面弹出框的图标的关闭事件。因为采用的弹出框。所以需要用到的是@close方法来做关闭事件。所以部分代码如下：
html代码：

<el-dialog :title="表格" :visible.sync="holidayFormVisible" width="40%" center custom-class="resonDialog" @close="cancelholiday">
			<el-form :model="form" ref="form" label-width="100px">
				<el-form-item label="管控日期">
					<el-date-picker type="dates" v-model="form.value14" popper-class="hx-h11" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择假期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelholiday">{{$t('common.cancel')}}</el-button>
				<el-button type="primary" @click="holidayConfirm('form')">{{$t('common.confirm')}}</el-button>
			</div>
		</el-dialog>

css代码：

.hx-h11 {
    z-index: 9999 !important;
    top: 188px !important;
}

js代码：

holidayFormVisible: false,

//关闭方法
cancelholiday: function() {
            this.holidayFormVisible = false;
            this.form = {
                value14: []
            };
        },