vue使用element-ui的el-date-picker设置样式无效的解决

 更新时间:2023年03月07日 09:22:57   作者:ChangYan.  
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一般在vue中设置css样式,由于代码为<style lang=“scss” scoped>,设置了scoped,所以一般改变element-ui中的样式都使用::v-deep来进行。但是对于el-date-picker发现设置v-deep并没有效果,无法改变样式。

这是由于el-date-picker没有挂载到当前页面上,而是直接挂载到了整体的body中,也就是说在当前加载出来的页面上无法定位到el-date-picker,所以在当前页无法进行css样式设置。

解决办法:

设置全局样式,在main.js里引入

如图:

在这里插入图片描述

然后我在index.scss里边设置了自定义的宽度

在这里插入图片描述

然后看看效果,确实设置成功了!

在这里插入图片描述

 到此这篇关于vue使用element-ui的el-date-picker设置样式无效的解决的文章就介绍到这了,更多相关el-date-picker 样式无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识,感兴趣的朋友一起看看吧
    2019-04-04
  • 基于Vue3的全屏拖拽上传组件

    基于Vue3的全屏拖拽上传组件

    本文主要介绍了基于Vue3的全屏拖拽上传组件,其实思路上与其他拖拽上传组件基本一样,都是指定一个区域可拖拽,然后读取文件在上传,需要的朋友们下面随着小编来一起学习学习吧
    2021-09-09
  • Vue项目判断开发、测试、正式环境过程

    Vue项目判断开发、测试、正式环境过程

    这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue+element 解决浏览器自动填充记住的账号密码问题

    Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中,如何实现此功能呢,下面小编给大家介绍下,感兴趣的朋友一起看看吧
    2019-06-06
  • vuedraggable+element ui实现页面控件拖拽排序效果

    vuedraggable+element ui实现页面控件拖拽排序效果

    这篇文章主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 浅析Vue 中的 render 函数

    浅析Vue 中的 render 函数

    在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM,今天小编就通过本文给大家简单介绍下Vue 中 render 函数,需要的朋友可以参考下
    2020-02-02
  • vue-cli中实现响应式布局的方法

    vue-cli中实现响应式布局的方法

    这篇文章主要介绍了vue-cli中实现响应式布局的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader)

    通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下
    2018-12-12
  • 一文带你了解vue3.0响应式

    一文带你了解vue3.0响应式

    Vue3.0相比较于之前的版本更快、更小、更易于维护、更贴近原生、对开发者更友好,本文就Vue3.0进行详细介绍,需要了解的小伙伴可以参考一下这篇文章
    2021-09-09
  • 解决Vue3使用Element-Plus导航刷新后active高亮消失的问题

    解决Vue3使用Element-Plus导航刷新后active高亮消失的问题

    这篇文章主要给大家介绍了如何解决Vue3使用Element-Plus导航刷新后active高亮消失的问题,文中有相关的代码讲解,需要的朋友可以参考下
    2023-08-08

最新评论