您的位置：首页 > 编程技术 > js  >  解决element DateTimePicker+vue弹出框只显示小时

解决element DateTimePicker+vue弹出框只显示小时

 更新时间：2021年3月16日 10:05  点击：2655

三个知识点：

1.css 后代选择器

https://www.w3school.com.cn/css/css_selector_descendant.asp

2.vue深度选择器

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

3.element ui DateTimePicker 指定下拉框类名 popper-class

https://element.eleme.cn/#/zh-CN/component/datetime-picker

在搞清楚上述三个知识点的前提下，在vue页面的全局样式中（即不带有scoped标记的style标签中），利用css 后代选择器+vue深度选择器可以锁定要控制的element ui组件中的样式，用外层的样式类名约束了要控制的element ui组件内部的样式，所以不会造成全局所有element ui组件被污染的情况。

但是DateTimePicker比较特殊，弹出框的dom不隶属于当前的vue文件内的任何标签，所以无法在当前页用css 后代选择器+vue深度选择器锁定要自定义样式的DateTimePicker的弹出框部分。通过查阅DateTimePicker的官方文档发现可以使用popper-class来指定下拉框类名。这样就可以使用这个指定的类名+vue深度选择器在全局样式中唯一重写某个需要自定的DateTimePicker的弹出框部分。

<template>
 <div class="app-container ">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      format="yyyy-MM-dd HH"
      value-format="yyyy-MM-dd HH"
      popper-class="tpc"
     ></el-date-picker>
 
  </div>
</template>
<style lang="scss" scoped>
...
</style>
 
<style>
.tpc /deep/ .el-time-spinner__wrapper {
 width:100% !important;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
 display: none !important;
}
</style>

到此这篇关于解决element DateTimePicker+vue弹出框只显示小时的文章就介绍到这了,更多相关element DateTimePicker弹出框内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！ 

[!--infotagslink--]

相关文章

  • 解决Element-ui el-table合计行 show-summary 不显示的问题

    有时候需要在table的底部有合计，这时候官方给的是在table里设置，show-summary就可以了但是给table加了一个固定高度的话，就不显示了，打开控制台可以看到这个合计是存在的那么需...2020-12-11

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件

    这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-02-20

  • Element PageHeader页头的使用方法

    这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-27

  • vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-29

  • vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30

  • Element图表初始大小及窗口自适应实现

    这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10

  • Element Steps步骤条的使用方法

    这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-27

  • Element-ui upload上传文件限制的解决方法

    这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-25

  • Element Card 卡片的具体使用

    这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-26

  • Element-ui 自带的两种远程搜索(模糊查询)用法讲解

    这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-29

  • vue+element实现动态换肤的示例代码

    本文主要介绍了vue+element实现动态换肤的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-07

  • vue element后台鉴权流程分析

    这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-10

  • vue+element-ui表格封装tag标签使用插槽

    这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-19

  • 微信小程序自定义底部弹出框动画

    这篇文章主要介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-16

  • Element的穿梭框数据量大时点击全选卡顿的解决方案

    本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-31

  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-02

  • Framework7 设置是否允许点击弹出框外部区域，关闭弹出层

    下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域，关闭弹出层的使用例子，具体的细节步骤如下文介绍。 1，Framework7中三大类弹出框 （1）模态框（moda...2016-10-02

  • vue element table中自定义一些input的验证操作

    这篇文章主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-16