vue如何修改el-form-item中的label样式修改问题

 更新时间:2023年10月17日 09:11:10   作者:__十七  
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

修改el-form-item中的label样式修改

操作步骤

1,style标签中不要加scoped

2,在对应的el-form-item的label标签属性中加入class属性

3,在style标签中,先找到label对应的class,在修改label

<el-form-item label="用户名" class="item">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名" maxlength="10"></el-input>
   </el-form-item>
<style lang="less">
      .item .el-form-item__label{
    color: blake;
}
   </style>

vue使用elementUI form表单label样式修改

1.删除style标签中的 scoped 属性

   <style lang="lang" scoped>
      ...
   </style>

2.在对应el-form-item的label属性中加入class样式

   <el-form-item label="用户名" class="item">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名" maxlength="10"></el-input>
   </el-form-item>

3.审查元素,找到label对应的class

如:.el-form-item__label 添加如下样式代码

.item .el-form-item__label{
    color: wheat;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决axios post 后端无法接收数据的问题

    解决axios post 后端无法接收数据的问题

    今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 京东 Vue3 组件库支持小程序开发的详细流程

    京东 Vue3 组件库支持小程序开发的详细流程

    这篇文章主要介绍了京东 Vue3 组件库支持小程序开发的详细流程,通过引入NutUI,即可在项目中使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-06-06
  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    Vue + Scss 动态切换主题颜色实现换肤的示例代码

    这篇文章主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue请求后端数据和跨域问题解决

    vue请求后端数据和跨域问题解决

    这篇文章主要介绍了vue请求后端数据和跨域问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • iview中Select 选择器多选校验方法

    iview中Select 选择器多选校验方法

    下面小编就为大家分享一篇iview中Select 选择器多选校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 一文带你搞懂Vue.js如何实现全选反选功能

    一文带你搞懂Vue.js如何实现全选反选功能

    这篇文章主要为大家详细介绍了Vue.js实现全选反选功能的相关知识,文中是示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下
    2025-01-01
  • Vue3 组件的开发详情

    Vue3 组件的开发详情

    这篇文章主要介绍了Vue3组件的开发,上一篇文章我们价绍了Vue3(三)网站首页布局开发,今天继续上篇内容展开组件的开发,需要的朋友可以参考一下
    2021-11-11
  • vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue CLI 2.x搭建vue(目录最全分析)

    Vue CLI 2.x搭建vue(目录最全分析)

    这篇文章主要介绍了Vue CLI 2.x搭建vue(目录最全分析),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下
    2018-08-08

最新评论